{site_name}

{site_name}

🌜 搜索

CSS3中的box-shadow属性用于向元素添加阴影效果

前端 𝄐 0
css3垂直居中水平居中,css3 calc性能,css3 重合部分隐藏,css3 重复样式提取,css3 cur指针不显示,CSS3常见布局形式有哪些
CSS3中的box-shadow属性用于向元素添加阴影效果。它允许您控制阴影的颜色、位置、大小和模糊度等属性,从而为页面提供更加丰富的视觉效果。

box-shadow属性的语法如下:


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


其中,h-shadow和v-shadow表示阴影的水平和垂直偏移量,可以为负值;blur表示阴影的模糊度,可以省略;spread表示阴影的扩散半径,也可以省略;color表示阴影的颜色;inset表示是否将阴影嵌入到元素内部。

例如,以下代码向一个div元素添加了蓝色、带有5像素模糊半径的阴影效果:

css
div{
box-shadow: 0px 0px 5px blue;
}


以下是一些其他的例子:

css
/* 带有多个阴影的按钮 */
button {
box-shadow:
0 0 10px rgba(0,0,0,0.2), /* 黑色阴影 */
0 0 20px rgba(0,0,0,0.15), /* 更轻的黑色阴影 */
0 0 30px rgba(0,0,0,0.1); /* 最浅的黑色阴影*/
}

/* 内嵌阴影效果 */
div {
box-shadow: inset 0px 0px 10px #ccc;
}

/* 给图片添加阴影 */
img {
box-shadow: 5px 5px 5px #888;
}