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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章