box-shadow属性

box-shadow属性

语法

box-shadow: h-shadow v-shadow blur spread color inset;

• 默认值 none

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。[CSS颜色值]
inset	可选。将外部阴影 (outset) 改为内部阴影。

CSS颜色值

• 十六进制色
  所有浏览器都支持十六进制颜色值。
  十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

p {
background-color:#0000ff;
}

• RGB 颜色
  所有浏览器都支持 RGB 颜色值。
  RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值(从 0% 到 100%)。

p {
background-color:rgb(255,0,0);
} 

• RGBA 颜色
  RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
  RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
  RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

p {
background-color:rgba(255,0,0,0.5);
}

• HSL 颜色
  HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
  HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
  HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
  Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。

p {
background-color:hsl(120,65%,75%);
}

• HSLA 颜色
  HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
  HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
  HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

p {
background-color:hsla(120,65%,75%,0.3);
}

• 预定义/跨浏览器颜色名
  
  1. aqua（水绿）
  2. black（黑）
  3. blue（蓝）
  4. fuchsia（紫红）
  5. gray（灰）
  6. green（绿）
  7. lime（浅绿）
  8. maroon（褐）
  9. navy（深蓝）
  10. olive（橄榄）
  11. purple（紫）
  12. red（红）
  13. silver（银）
  14. teal（深青）
  15. white（白）
  16. yellow（黄）
  17. transparent (透明)

参考
http://www.w3school.com.cn/cssref/pr_box-shadow.asp