[分享]css3四边加阴影

CSS3提供了许多方便快捷的样式功能，其中四边加阴影就是其中之一。通过使用boxshadow属性，我们可以给元素的四边都添加阴影效果。 .box{ boxshadow: 5px 5px 5px 5px...

CSS3提供了许多方便快捷的样式功能，其中四边加阴影就是其中之一。通过使用box-shadow属性，我们可以给元素的四边都添加阴影效果。

 .box{
     box-shadow: 5px 5px 5px 5px #888;
   } 

上述代码是添加一个5px模糊的黑色阴影效果，阴影的大小和颜色也可以根据需求进行自定义。如果想要添加多重阴影效果，只需要在box-shadow后面紧接着再写一条box-shadow属性即可。

 .box{
     box-shadow: 5px 5px 5px 5px #888, -5px -5px 5px 5px #ccc;
   } 

上述代码就是在原有的阴影效果基础上，添加了一个相反方向的5px模糊的灰色阴影效果。

当然，如果你想控制阴影效果的位置和大小，也可以通过分别设置box-shadow属性的四个参数来进行实现。第一个参数表示阴影偏移的水平距离，第二个参数表示阴影偏移的垂直距离，第三个参数表示阴影的模糊距离，第四个参数表示阴影的延伸距离。

总之，利用box-shadow属性可以轻松实现元素的四边加阴影效果，让页面效果更加炫酷和生动。