box-shadow最好看的参数
时间: 2023-11-18 22:51:43 浏览: 118
css box-shadow阴影不透明的解决办法
box-shadow属性的参数可以根据你想要的效果来选择。以下是一些常用的参数:
1. 水平偏移量:可以使用负值使阴影向左偏移,使用正值使阴影向右偏移。
2. 垂直偏移量:可以使用负值使阴影向上偏移,使用正值使阴影向下偏移。
3. 模糊半径:控制阴影的模糊程度。较大的值会创建一个更模糊的阴影效果。
4. 扩展半径:控制阴影的扩展范围。较大的值会使阴影更宽,较小的值会使阴影更窄。
5. 阴影颜色:可以使用颜色名称、十六进制、RGB或RGBA值来指定阴影的颜色。
以下是一些示例,你可以根据需要进行调整:
1. box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
这个参数会在目标元素的右下方创建一个稍微模糊的灰色阴影。
2. box-shadow: -2px -2px 4px rgba(255, 0, 0, 0.5);
这个参数会在目标元素的左上方创建一个稍微模糊的红色阴影。
3. box-shadow: 0 0 10px rgba(0, 0, 255, 0.8);
这个参数会在目标元素周围创建一个深蓝色的阴影,模糊程度较高。
请注意,box-shadow属性还支持多个阴影效果,你可以使用逗号将它们分隔开。
阅读全文