【CSS】盒子模型如何设置阴影
warning:
这篇文章距离上次修改已过191天,其中的内容可能已经有所变动。
CSS盒子模型不能直接设置阴影,但可以使用box-shadow
属性为元素添加阴影。
box-shadow
属性的基本语法如下:
box-shadow: offsetX offsetY blurRadius spreadRadius color inset;
offsetX
和offsetY
定义阴影的水平和垂直偏移量。blurRadius
定义模糊距离。spreadRadius
定义阴影的大小。color
定义阴影的颜色。inset
关键字(可选)定义内阴影而不是外阴影。
例子:
div {
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}
这段代码会在div
元素上添加一个向下及向右偏移5像素的模糊阴影,阴影的颜色为半透明的黑色,模糊半径为10像素。
评论已关闭