CSS 如何实现让div的四个边框都有阴影的效果？

html-css013

CSS 如何实现让div的四个边框都有阴影的效果？,第1张

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

<style type="text/css">

span{         box-shadow: 2px 4px 6px #000         }        </style>

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

简单的解释一下相关的代码属性

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

首先2px :  表示水平阴影的位置，然后4px : 表示垂直阴影的位置，接着5px : 表示模糊距离，最后#000 ： 表示阴影的颜色（#000  黑色）

拓展资料：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

参考资料：百度百科-CSS

<!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  黑色）

最后的效果如下：

box-shadow: 0 0 2px 5px rbga(255,255,255,0.5)

参数介绍 第一个0 是X轴方向的偏移值

第二个0 是Y轴方向的偏移值

第三个值是阴影的模糊度

第四个值是外延值，也就是阴影的宽

第四个是颜色， 0.5是透明度（取值范围0-1）

要想四边阴影，切相等，就要不偏移。给阴影设置外延值，即可。这是CSS3的属性，别忘了加相应的内核前缀