box-shadow 设置单边、多边阴影
CSS的box-shadow
属性可以用来设置一个元素的阴影效果。如果你想要设置单边或多边阴影,可以通过指定阴影的水平和垂直偏移以及模糊半径和扩散半径来实现。
单边阴影的例子:
/* 设置元素的单边阴影,例如左边阴影 */
.shadow-left {
box-shadow: -5px 0 10px -5px rgba(0, 0, 0, 0.6);
}
/* 设置元素的单边阴影,例如上边阴影 */
.shadow-top {
box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.6);
}
/* 设置元素的单边阴影,例如右边阴影 */
.shadow-right {
box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.6);
}
/* 设置元素的单边阴影,例如下边阴影 */
.shadow-bottom {
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.6);
}
多边阴影的例子:
/* 设置元素的多边阴影,可以通过叠加多个box-shadow值实现 */
.shadow-multiple {
box-shadow:
-5px 0 10px -5px rgba(0, 0, 0, 0.6), /* 左边阴影 */
5px 0 10px -5px rgba(0, 0, 0, 0.6), /* 右边阴影 */
0 -5px 10px -5px rgba(0, 0, 0, 0.6), /* 上边阴影 */
0 5px 10px -5px rgba(0, 0, 0, 0.6); /* 下边阴影 */
}
在这些例子中,-5px 0 10px -5px rgba(0, 0, 0, 0.6)
代表阴影的偏移量(第一个值为水平偏移,正值向右偏移,负值向左偏移;第二个值为垂直偏移,正值向下偏移,负值向上偏移),10px
是模糊半径,-5px
是扩散半径,而rgba(0, 0, 0, 0.6)
是阴影的颜色,最后的分号;
用于分隔不同的阴影效果。
评论已关闭