box-shadow屬性
語法
box-shadow: h-shadow v-shadow blur spread color inset;
值 |
描述 |
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);
}
- 預定義/跨瀏覽器顏色名
- aqua(水綠)
- black(黑)
- blue(藍)
- fuchsia(紫紅)
- gray(灰)
- green(綠)
- lime(淺綠)
- maroon(褐)
- navy(深藍)
- olive(橄欖)
- purple(紫)
- red(紅)
- silver(銀)
- teal(深青)
- white(白)
- yellow(黃)
- transparent (透明)
參考
http://www.w3school.com.cn/cssref/pr_box-shadow.asp