css:阴影效果box-shadow
CSS的box-shadow属性用于给元素添加阴影效果。该属性可以设置水平阴影的位置、垂直阴影的位置、模糊距离、阴影的扩散范围和阴影颜色。
基本语法如下：
box-shadow: offsetX offsetY blurRadius spreadRadius color inset;offsetX和offsetY分别设置阴影在水平和垂直方向上的偏移量。blurRadius设置阴影的模糊程度。spreadRadius设定阴影的大小。color定义阴影的颜色。inset关键字（如果提供）表示内阴影（即内凹阴影）。如果不设置，阴影默认为外阴影。
例子：
/* 添加一个向下及向右偏移10px，模糊半径为15px的阴影 */
.box {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
/* 添加一个向上及向左偏移5px，模糊半径为10px，扩散半径为20px的阴影 */
.box {
box-shadow: -5px -5px 10px 20px rgba(255, 0, 0, 0.5);
}
/* 添加一个内阴影，向内偏移5px，模糊半径为10px的阴影 */
.box {
box-shadow: inset 5px 5px 10px rgba(0, 255, 0, 0.5);
}在实际应用中，根据需要调整这些值以创建所需的阴影效果。
评论已关闭