css中box-shadow盒子阴影

box-shadow盒子阴影

语法

外阴影：box-shadow: X轴  Y轴  Rpx  color;
属性说明（顺序依次对应）： 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值（大小）    阴影的颜色
内阴影：box-shadow: X轴  Y轴  Rpx  color  inset;
默认是外阴影        内阴影：inset 可以设置成内部阴

注意：

 此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影   如果设置文字阴影请参考知识点:text-shadow（同理）
 因为是新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

box-shadow盒取值

1. none：无阴影
2. length①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
3. length②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
4. length③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
5. length④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
6. color：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
7. inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影‘