css中怎么做到盒子四周显示阴影

随着网站界面设计追求越来越高，美工们已经开始使用盒子阴影来改善页面布局和观感。利用CSS来实现盒子四周显示阴影毫无疑问是一个值得掌握的技巧，本篇文章将介绍如何实现目标。

在CSS3中，我们可以通过box-shadow属性轻松制作阴影效果。该属性可以实现阴影的四个功能分别是：阴影位置、阴影模糊、阴影扩散和阴影大小。下面是一个显示阴影的CSS样式代码：

.shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} 

上面的代码表示在元素的周围添加一个阴影，阴影颜色为黑色，不透明度为0.5，阴影模糊半径为10像素。

要加深阴影效果，可以多次使用阴影效果达到叠加的效果。下面是一个盒子四面显示阴影的样式代码：

.shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2), -1px 0 0 rgba(0, 0, 0, 0.2), 1px 0 0 rgba(0, 0, 0, 0.2);
} 

上面的样式代码使用box-shadow属性分别绘制了上、下、左、右四个方向的阴影，使元素的四个边都产生了阴影效果。

除了使用box-shadow属性，还可以使用CSS3的filter属性实现盒子阴影。不过，这种方法还处于实验阶段，需要在谷歌浏览器中使用-webkit-filter属性。

CSS制作盒子四周显示阴影是一种简单而有效的方式，可以方便美工们实现各种网站布局和设计效果。学好这一技术，可以让你的网站界面设计水平更上一层楼。