css设置box-shadow
时间: 2023-10-02 08:05:57 浏览: 170
CSS3属性box-shadow使用指南
要设置CSS的box-shadow属性,你可以使用以下语法格式:
box-shadow: h-shadow v-shadow blur spread color;
其中:
- h-shadow:表示水平阴影的位置,可以是一个正值(向右)或负值(向左)。
- v-shadow:表示垂直阴影的位置,可以是一个正值(向下)或负值(向上)。
- blur:表示阴影的模糊程度,可以是一个正值(模糊)或零(不模糊)。
- spread:表示阴影的大小,可以是一个正值(增大阴影)或零(阴影与对象大小相同)。
- color:表示阴影的颜色,可以是一个具体的颜色值(如#000000)或使用rgba()函数设置透明度。
根据您提供的引用,以下是一个设置box-shadow的示例代码:
.box {
width: 100px;
height: 100px;
border: 3px dashed #000000;
border-radius: 50px;
margin: 20px;
box-shadow: 10px 10px 10px #000000;
}
这将在盒子的右下方创建一个10像素的黑色阴影。请注意,box-shadow属性不考虑透明度,所以如果您的对象具有透明度,box-shadow和drop-shadow之间会有明显的差异。
此外,您还可以使用filter属性中的drop-shadow()函数来创建阴影效果。例如:
.drop-shadow {
filter: drop-shadow(2px 2px 2px #000000);
}
这将在盒子的右下方创建一个2像素的黑色阴影。不同于box-shadow,drop-shadow会考虑对象的透明度。
希望这个回答对您有所帮助!
阅读全文