作者：嗷唔喵_105 | 来源：互联网 | 2023-10-13 10:10
前端CSS3阴影box-shadow用法语法box-shadow:h-shadowv-shadowblurspreadcolorinset;对应解释box-shadow:水平阴影（
前端CSS3阴影box-shadow用法
语法
box-shadow: h-shadow v-shadow blur spread color inset;
对应解释
box-shadow: 水平阴影（必须） 垂直阴影（必须） 模糊效果（可选） 模糊距离（可选） 阴影颜色（可选） 内部阴影（可选，默认为外部阴影：outset，且不可设置为outset）;
上代码详细介绍
点击查看代码
效果图
h-shadow（水平方向的阴影）和v-shadow（垂直方向的阴影）是必需的
box-shadow: 6px 6px;
上代码
点击查看代码
.box-shadow {
background-color: #9d26ff;
width: 156px;
height: 156px;
box-shadow: 6px 6px;
}
效果图
设置为负值
box-shadow: -6px -6px;
上代码
点击查看代码
.box-shadow {
background-color: #9d26ff;
width: 156px;
height: 156px;
box-shadow: -6px -6px;
}
效果图
blur（阴影模糊效果）是可选的
box-shadow: 6px 6px 3px;
上代码
点击查看代码
.box-shadow {
background-color: #9d26ff;
width: 156px;
height: 156px;
box-shadow: 6px 6px 3px;
}
效果图
可以看到，黑色阴影部分出现模糊效果
spread（阴影模糊距离）是可选的
box-shadow: 6px 6px 3px 3px;
上代码
点击查看代码
.box-shadow {
background-color: #9d26ff;
width: 156px;
height: 156px;
box-shadow: 6px 6px 3px 3px;
}
效果图
可以看到，黑色阴影部分变宽了
color（阴影的颜色）是可选的
box-shadow: 6px 6px 3px 3px gray;
上代码
点击查看代码
.box-shadow {
background-color: #9d26ff;
width: 156px;
height: 156px;
box-shadow: 6px 6px 3px 3px gray;
}
效果图
可以看到，黑色阴影部分变成灰色（默认为黑色）
inset（内部阴影）是可选的
box-shadow: 6px 6px 3px 3px gray inset;
上代码
点击查看代码
.box-shadow {
background-color: #9d26ff;
width: 156px;
height: 156px;
box-shadow: 6px 6px 3px 3px gray inset;
}
效果图
将h-shadow（水平方向的阴影）和v-shadow（垂直方向的阴影）设置成负值
box-shadow: -6px -6px 3px 3px gray inset;
效果图
注意：阴影方式默认为外部阴影，但不可设置为outset，是不生效的，不设置即为外部阴影
例：box-shadow: 6px 6px 3px 3px gray outset; 错误
效果图
例：box-shadow: 6px 6px 3px 3px gray; 正确
效果图
京公网安备 11010802041100号