CSS3 box-shadow 属性
时间: 2023-10-02 12:05:57 浏览: 57
CSS3的box-shadow属性用于向元素添加阴影效果。可以通过指定x轴偏移量、y轴偏移量、模糊半径、扩展半径和颜色来定义阴影。可以使用逗号将多个阴影效果叠加在一起。
例如,在以下示例中,box-shadow属性被用于创建一个绿色的盒子阴影:
```html
<style type="text/css">
div {
width: 100px;
height: 100px;
margin: 50px;
border: 10px dotted pink;
display: inline-block;
box-shadow: 0 0 10px 10px green;
}
</style>
<body>
<div></div>
</body>
```
在这个例子中,x轴偏移量和y轴偏移量都为0,模糊半径为10px,扩展半径为10px,颜色为绿色。
box-shadow属性还可以用于创建更复杂的阴影效果,可以同时添加多个阴影效果,并使用inset关键字指定内阴影。
例如,在以下示例中,box-shadow属性被用于创建不同类型的阴影效果:
```html
<style type="text/css">
div {
width: 100px;
height: 100px;
margin: 50px;
border: 10px dotted pink;
display: inline-block;
}
.shadow0 { box-shadow: 0 0; }
.shadow1 { box-shadow: 1px 1px; }
.shadow10 { box-shadow: 10px 10px; }
.inset-shadow0 { box-shadow: 0 0 inset; }
.inset-shadow1 { box-shadow: 1px 1px inset; }
.inset-shadow10 { box-shadow: 10px 10px inset; }
</style>
<body>
<div class="shadow0"></div>
<div class="shadow1"></div>
<div class="shadow10"></div>
<div class="inset-shadow0"></div>
<div class="inset-shadow1"></div>
<div class="inset-shadow10"></div>
</body>
```
在这个例子中,使用不同的偏移量和inset关键字,创建了不同类型的阴影效果。
总结来说,CSS3的box-shadow属性可以用于创建各种阴影效果,包括内阴影和多重阴影。可以通过调整偏移量、模糊半径、扩展半径和颜色来实现不同的效果。