box-shadow以由逗號分隔的列表來描述乙個或多個陰影效果。該屬性讓你可以對幾乎所有元素的邊框產生陰影。如果元素同時設定了border-radius，陰影也會有圓角效果。多個陰影的z-ordering 和多個 text shadows 規則相同(第乙個陰影在最上面)。inset預設陰影在邊框外。
引數：設定水平偏移量，如果是負值則陰影位於元素左邊。
設定垂直偏移量，如果是負值則陰影位於元素上面。可用單位請檢視 後緊隨乙個長度單位（px，em，pt，in，mm，...）組成。和任何 css 尺寸一樣，數字和單位之間沒有空格。0之後的長度單位是可選的。" href="" rel="noopener">。如果兩者都是0，那麼陰影位於元素後面。這時如果設定了或則有模糊效果。
模糊半徑值越大，模糊面積越大，陰影就越大越淡。 不能為負值。預設為0，此時陰影邊緣銳利。
擴充套件半徑取正值時，陰影擴大；取負值時，陰影收縮。預設為0，此時陰影與元素同樣大。
相關事項檢視 表示一種標準rgb色彩空間（srgb color space）的顏色。一種顏色可以用以下任意的方式來描述：" href="" rel="noopener">的值，不過目前safari取透明。
使用inset後，陰影在邊框內（即使是透明邊框），背景之上內容之下。
才是用來控制陰影大小（擴充套件還是縮小）。如果沒有設定擴充套件半徑，那麼陰影尺寸與元素大小相同。
.shadow效果如下：
只要沒有設定擴充套件半徑，陰影實際的大小不改變。的值用來控制模糊程度，並不控制陰影的大小。就類似於於photoshop中的羽化半徑。
擴充套件半徑如果是正的值，陰影擴充套件，如原來總寬高為44px的元素（包括邊框2px），在設定10px擴充套件半徑後，陰影的寬高會變為64px。
擴充套件半徑如果是負的值，陰影收縮，如原來總寬高為44px的元素（包括邊框2px），在設定-10px半徑後，陰影的寬高會變為24px。
製作單邊陰影時候常遇見這樣乙個情況，明明設定了x,y軸方向的偏移，為什麼別的邊還是有陰影出現。
如果不想邊框左邊出現任何綠色陰影，那麼我們需要將x方向的偏移量調大一下。
可是元素右邊的陰影太多了，如果將x偏移量改小了，左邊就會出現陰影。
這種進退維谷的情況讓人很奔潰。這其實模糊半徑帶來的問題，在設定模糊半徑的時候（沒有設定偏移量和擴充套件半徑），發現元素四周會有陰影（羽化）的效果。
為了解決這個問題我們會不停調整左右的偏移量，其實我們應該調整元素擴充套件半徑，讓它變為負值，縮小陰影尺寸。
左邊陰影底部陰影
右部陰影
頂部部陰影
左上陰影
右上陰影
左下陰影
右下陰影
無左陰影
無下陰影
無右陰影
無上陰影
css中border製作各種形狀
css利用border製作各種形狀的原理如圖 使用border繪製三角形是什麼原理？事實上，寬度相等的border是以45度對接的，如下圖 沒有了上border如圖所示 再設定border的寬度為0 設定border的高度為0 如圖 最後設定左右border的顏色為透明，如下圖 貼 做個小三角形 看...
CSS製作各種樣式的彩虹效果
今天看到一篇文章，說到margin的塌陷的問題，並提供了好幾個例子。自己之前還沒怎麼遇到過這個問題，正好來研究一下。css code複製內容到剪貼簿 css樣式一，使用margin塌陷 css code複製內容到剪貼簿 效果 css樣式二，也是使用的margin塌陷，不過做出來的是弧形的彩虹 css...
CSS各種濾鏡製作10種藝術效果字
並加以組合，我們可以得到許多意想不到的效果。這是一些效果示範，供各位參考。效果一 www.webjx.com 這個效果用了shadow濾鏡，如下 filter shadow color black,direction 135 效果二 www.webjx.com 用blur濾鏡做出的效果，如下 fil...