Box-shadow属性易懂

最新推荐文章于 2024-07-26 08:45:03 发布

柒丶月

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量646

点赞数 1

分类专栏：前端学习笔记文章标签： css3 css

本文链接：https://blog.csdn.net/lin1072368472/article/details/104097574

版权

50 篇文章 2 订阅

订阅专栏

box-shadaw语法：

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

简单翻译成

box-shaow：水平位置垂直位置阴影模糊阴影大小阴影颜色内外阴影

h-shadow：水平方式的阴影
v-shadow：垂直方向的阴影
blur:阴影模糊程度
spread:阴影大小
color：阴影颜色
inset ：设置内阴影不设置外阴影

设置正值阴影位置往右负值往左

.box{
            width: 100px;
            height: 100px;
            background: blue;
            box-shadow: 5px 0px 3px black;
        }

在这里插入图片描述

box-shadow: -5px 0px 3px black;

在这里插入图片描述

box-shadow: 0px 5px 3px black;

在这里插入图片描述

box-shadow: 0px -5px 3px black;

在这里插入图片描述

值越大阴影越模糊

box-shadow: 0px 5px 0px black;

第三个参数值得对比
在这里插入图片描述

box-shadow: 0px 5px 20px black;

box-shadow: 0px 5px 3px 10px black;

在这里插入图片描述

box-shadow: 0px 5px 3px 10px red;

在这里插入图片描述

box-shadow: 0px 5px 3px 10px red inset;

在这里插入图片描述

关注

专栏目录