CSS 可以通过 box-shadow 属性来为元素添加阴影,进而为边框添加阴影效果。 /* 语法 */ box-shadow: h-shadow v-shadow blur spread color
CSS 可以通过 box-shadow 属性来为元素添加阴影,进而为边框添加阴影效果。
/* 语法 */ box-shadow: h-shadow v-shadow blur spread color inset; /* 示例 */ box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
其中,各属性的含义如下:
h-shadow
:表示水平方向上的阴影位置,可以是正数、负数、0。v-shadow
:表示竖直方向上的阴影位置,可以是正数、负数、0。blur
:表示阴影的模糊程度,数值越大,则越模糊。spread
:表示阴影的扩散程度,数值越大,则占用的空间越大。color
:表示阴影的颜色。可以是具体的颜色值,也可以是 RGB、RGBA、HSL、HSLA 等颜色格式。inset
:可选,表示阴影为内阴影,如果不写,则默认为外阴影。示例代码如下:
.box { width: 200px; height: 100px; border: 1px solid #ccc; box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5); }
上述代码中,添加了 2px 2px 的外阴影,模糊程度为 5px,扩散程度为 2px,颜色为半透明黑色。
粉丝
0
关注
0
收藏
0