CSS3属性box-shadow的使用

html-css018

CSS3属性box-shadow的使用,第1张

最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。

语法：

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

为了更清楚的了解box-shadow，做几个demo来给大家演示一下效果：

h-shadow代表的是阴影的水平位置偏移量，可以是正负值

即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边

v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值

当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面

blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和

spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。

color阴影的颜色值，可以用任何颜色单位的来表示。当我们没有设置颜色值，默认是黑色

默认情况下，设置的阴影都是外部阴影，inset的作用是将外部阴影转换成内部阴影

附：

属性定义及使用说明：

box-shadow属性可以设置一个或多个下拉阴影的框。

兼容性：

box-shadow 属性--设置元素阴影

实例：  向 div 元素添加 box-shadow

<!DOCTYPE html>

<html>

<head>

    <style> 

        div{

            width:300px

            height:100px

            background-color:#ff9900

            -moz-box-shadow: 10px 10px 5px #888888 /* 老的 Firefox */

            box-shadow: 10px 10px 5px #888888

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

text-shadow 属性 ---设置文字阴影 <!DOCTYPE html>

<html>

<head>

    <style>

   

         h1{

            text-shadow: 5px 5px 5px #FF0000

        }

    </style>

</head>

<body>

    <h1>文本阴影效果！</h1>

</body>

</html>

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

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

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

black就是阴影的颜色啦；

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

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