美文网首页web前端技术分享
CSS3单边阴影box-shadow的设置

CSS3单边阴影box-shadow的设置

作者: 在小白的路上越走越远 | 来源:发表于2020-07-12 15:24 被阅读0次

    box-shadow设置阴影效果

    box-shadow: h-shadow,v-shadow,blur,spread,color,inset;

    h-shadow:必需的。水平阴影的位置。允许负值
    v-shadow:必需的。垂直阴影的位置。允许负值
    blur:可选。模糊距离
    spread:可选。阴影的大小
    color:可选。阴影的颜色。
    inset可选。默认外侧阴影,写入inset后默认内侧阴影。

    设置左边阴影:
    box-shadow:10px 0px 8px -8px darkgrey;
    设置右边阴影
    box-shadow:-6px 0px 5px -5px darkgrey;
    设置上方阴影:
    box-shadow:0px 6px 5px -5px darkgrey;
    设置下方阴影:
    box-shadow:0px -8px 5px -5px darkgrey;

    思路:第三参数和第四参数相互抵消,可以让其他边框效果隐藏。
    然后再移动单边的距离,大于其参数就可以设置单边效果。

    以box-shadow:-6px 0px 5px -5px darkgrey举例
    -6px的绝对值大于5px,则可以设置右边框.

    相关文章

      网友评论

        本文标题:CSS3单边阴影box-shadow的设置

        本文链接:https://www.haomeiwen.com/subject/tvwacktx.html