【CSS】单边阴影、双边阴影、三边阴影
CSS中创建单边、双边或三边阴影可以使用box-shadow
属性。这个属性允许你指定水平偏移、垂直偏移、模糊半径、扩散半径以及阴影颜色。
单边阴影:
/* 水平偏移 垂直偏移 模糊半径 阴影颜色 */
.single-box-shadow {
box-shadow: 10px 10px 5px #888888;
}
双边阴影:
/* 第一条阴影 */
.double-box-shadow-1 {
box-shadow: -10px -10px 5px #888888;
}
/* 第二条阴影 */
.double-box-shadow-2 {
box-shadow: 10px 10px 5px #888888;
}
三边阴影:
/* 第一条阴影 */
.triple-box-shadow-1 {
box-shadow: -10px -10px 5px #888888;
}
/* 第二条阴影 */
.triple-box-shadow-2 {
box-shadow: 10px 10px 5px #888888;
}
/* 第三条阴影 */
.triple-box-shadow-3 {
box-shadow: 10px -10px 5px #888888;
}
在实际应用中,你可以根据需要调整阴影的颜色、偏移量和模糊半径。
评论已关闭