css阴影效果属性:box-shadow属性
来源:千锋教育
发布人:syq
2023-03-09
推荐
在线提问>>
box-shadow属性可以用来添加元素的阴影效果。该属性允许设置阴影的颜色、偏移量、模糊度和扩散度等。以下是属性的语法：box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
其中各个值的含义如下：
h-shadow：水平偏移量，可以是负值，表示阴影向左偏移;正值表示阴影向右偏移。
v-shadow：垂直偏移量，可以是负值，表示阴影向上偏移;正值表示阴影向下偏移。
blur：模糊度，可以是0，表示阴影不模糊;也可以是正整数，表示阴影的模糊程度，值越大，阴影越模糊。
spread：扩散度，可以是0，表示阴影不扩散;也可以是正整数，表示阴影的扩散程度，值越大，阴影越扩散。
color：阴影的颜色。
inset：可选值，如果存在，表示阴影在元素内部，而不是外部。
以下是一个示例，展示了如何使用属性创建元素的阴影效果：box-shadow
.box {
width: 200px;
height: 200px;
background-color: #f5f5f5;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px #888888;
}
以上代码创建了一个200x200像素的元素，并且添加了一个向右下方偏移5像素，模糊度为5像素，颜色为#888888的阴影。
