css 边框外部四周阴影

CSS边框外部四周阴影是一种在网页设计中常用的技巧，可以让网页更加美观。那么怎么实现呢？下面让我们一起来看一下。

/* CSS代码 */
.Box {
  border: 1px solid #ddd;
  Box-shadow: 0px 0px 5px rgba(0,.3);
}

上面是一个简单的例子，其中的Box类就是需要添加阴影效果的元素，下面我们来详细解释一下代码：

1. border: 1px solid #ddd;定义了元素的边框，这里是1像素粗的实线边框。

2. Box-shadow: 0px 0px 5px rgba(0,.3);定义了元素的四周阴影效果，具体解释如下：

- 第一个数值是水平偏移量，这里是0。

- 第二个数值是垂直偏移量，这里是0。

- 第三个数值是模糊半径，这里是5像素。

- 第四个数值是阴影颜色和透明度，这里使用的是rgba格式的颜色，黑色半透明。

这样就完成了一个简单的CSS边框外部四周阴影的效果。

需要注意的是，Box-shadow属性不同浏览器支持程度不同，有些浏览器需要在前面加上浏览器前缀：

/* Firefox */
-moz-Box-shadow: 0 0 5px rgba(0,.3);

/* Safari and Chrome */
-webkit-Box-shadow: 0 0 5px rgba(0,.3);

/* IE9+ */
Box-shadow: 0 0 5px rgba(0,.3);

以上就是CSS边框外部四周阴影的相关内容，希望对大家有所帮助。