• 元素单侧阴影效果


    语法: box-shadow: h-shadow   v-shadow   blur   spread   color   inset;

    (box-shadow: 水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色  内部阴影;)

    水平阴影、垂直阴影值必填,其余值可选;

    1)box-shadow的第二个参数1px,表示垂直阴影,其值越大,向下偏移越大;

    .box{
        width:300px;
        height: 200px;
        box-shadow: 0px 1px 10px 0px green;//第二个参数1px,表示垂直阴影,其值越大,向下偏移越大;
        margin:20px;
    }

    效果图如下所示:

    当将垂直距离的参数设置变大时:

    .box{
        width:300px;
        height: 200px;
        box-shadow: 0px 10px 10px 0px green;//第二个参数10px,表示垂直阴影,其值越大,向下偏移越大;
        margin:20px;
    }

    效果图:

    可以看出上册已经看不到绿颜色的边框了。

    2)第三个参数,表示阴影的半径,其值越大,阴影越模糊:

    .box{
        width:200px;
        height: 200px;
        border-radius: 50%;
        margin:20px;
        background-color: yellow;
        box-shadow: 0px 5px 1px 0px green;
    }

    效果:

    将第三个参数改为100:

     box-shadow: 0px 5px 100px 0px green;

    可以看出变得更加模糊。

     3)第四个参数表示阴影的半径:

    .box{
        width:200px;
        height: 200px;
        border-radius: 50%;
        margin:20px;
        background-color: yellow;
        box-shadow: 0px 0px 0px 20px green;
    }

    半径为20px;

    综上所述:如果要实现左侧和上册的阴影效果,则第一个和第二个参数要设置为负值。

    如果要实现元素周围等距离的阴影,则需要设置第一个和第二个参数均为0;

  • 相关阅读:
    在VC中设置某些文件不参加编译的方法
    VC7/VC8开发的库在VC6中的使用问题转载
    *.tar.bz2文件解压
    设置VC工程为Debug或Releas版本的方法
    Linux下设置环境变量命令export
    Source insight中设置字体方法
    双系统或虚拟机中与主机时间不一致解决方法
    制作启动光盘方法
    Linux下nfs服务器搭建
    ghost的备份与恢复转载
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/5909933.html
Copyright © 2020-2023  润新知