CSS3四周阴影效果怎么做？

html-css025

CSS3四周阴影效果怎么做？,第1张

直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。

前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；

第三个值（10px）是设置模糊距离；

black就是阴影的颜色啦；

最后一个inset是在元素内部创建一个阴影，也就是内阴影了；

删除掉inset就是设置外阴影了

<!doctype html>

<html ng-app>

    <head>

        <meta charset="utf-8">

        <title>css怎么给4个边框添加阴影</title>

        <style type="text/css">

         span{

         box-shadow: 2px 4px 6px #000

         }

        </style>

    </head>

    <body>

        <span>百度知道“css怎么给4个边框添加阴影”</span>

    </body>

</html>

CSS属性解释：

box-shadow: 2px 4px 6px #000

2px :  表示水平阴影的位置

4px : 表示垂直阴影的位置

5px : 表示模糊距离

#000 ： 表示阴影的颜色（#000  黑色）

最后的效果如下：