box-shadow

語法

• 陰影水平偏移量x 水平偏移量y 顏色color
  box-shadow: 60px -16px teal;
• x y 陰影模糊程度blur-radius color
  box-shadow: 10px 5px 5px black;
• x y blur-radius 陰影擴(kuò)散程度spread-radius color
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
• 陰影在邊框內(nèi)inset x y color
  box-shadow: inset 5em 1em gold;

值

<inset>

概述

• 默認(rèn)陰影在邊框外。
• 使用inset后，陰影在邊框內(nèi)（即使是透明邊框），背景之上內(nèi)容之下。

<offset-x> <offset-y>

• 這是頭兩個 <length> 值，用來設(shè)置陰影偏移量。<offset-x> 設(shè)置水平偏移量，如果是負(fù)值則陰影位于元素左邊。 <offset-y> 設(shè)置垂直偏移量，如果是負(fù)值則陰影位于元素上面。
• 如果兩者都是0，那么陰影位于元素后面。這時如果設(shè)置了<blur-radius> 或<spread-radius> 則有模糊效果。

<blur-radius>

• 這是第三個 <length> 值。值越大，模糊面積越大，陰影就越大越淡。 不能為負(fù)值。默認(rèn)為0，此時陰影邊緣銳利。

<spread-radius>

這是第四個 <length> 值。取正值時，陰影擴(kuò)大；取負(fù)值時，陰影.收縮。默認(rèn)為0，此時陰影與元素同樣大。

<color>

相關(guān)事項(xiàng)查看 <color> 。如果沒有指定，則由瀏覽器決定——通常是color的值，不過目前Safari取透明。