HTML CSS3阴影属性

大家好，欢迎来到IT知识分享网。

css3阴影
1、文本阴影属性 ：text-shadow:10px 10px 10px red;
注：
第一个值 ： 水平方向的距离 （必须有的：支持负值）
第二个值 ： 垂直方向的距离 （必须有的：支持负值）
第三个值 ： 阴影的模糊程度 （不支持负值）
第四个值 ： 阴影的颜色
第一个值 和 第二个值得位置不能互换；
例：

span{
          width: 300px;
           display: block;
           margin: 50px auto;
           font-size: 30px;
           text-shadow: 10px 10px 10px red;
           }

水平距离10px 垂直距离10px 模糊程度10px
当给同一个文字设置多个阴影的时候，阴影和阴影之间用逗号隔开：
如：

text-shadow:  10px 10px 4px blue,  10px 10px 4px #ff3, 10px 10px 6px #fd3,0px 10px 11px #f80, -10px -25px 18px #f20;

说明：水平、垂直阴影的位置允许负值可进行多阴影设置(逗号分隔的方式)

2、盒子阴影属性
box-shadow 盒子阴影：
X-shadow 必需的。水平阴影的位置。允许负值
Y-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
例：

 div{
           height: 300px;
           	width: 300px;
           	margin: 50px auto;
           	background: red;
           	box-shadow: 10px 10px 50px 10px #9CBC2B ;
           }

水平阴影10px 垂直阴影10px 模糊距离50px 阴影大小10px

如果加上inset就会讲阴影改为内测
box-shadow: 10px 10px 50px 10px #9CBC2B inset;

当给一个盒子设置多个阴影的时候，阴影和阴影之间用逗号隔开：
box-shadow: 10px 10px 10px 10px #0f0 ,20px 20px 10px 10px #f0f ,30px 30px 10px 10px #888888 ;