• 元素单侧阴影效果


    语法: 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;

  • 相关阅读:
    2015新年说点啥
    How to debug the CPU usage 100
    C# Keyword usage virtual + override VS new
    Getting out of your comfort zone.
    Resource for learning Algos
    深圳五险一金缴纳比例
    HashSet/List 排序
    DataGrid 刷新选中问题
    WPF常用代码:Visual Logical Tree
    WPF常用代码:依赖属性
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/5909933.html
Copyright © 2020-2023  润新知