CSS3陰影使用起來非常方便,可以輕松實現各種炫酷的效果。下面我們就來了解一下CSS3陰影的值代表什么。
box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平陰影的位置,可以為負值。 v-shadow:垂直陰影的位置,可以為負值。 blur:模糊的距離。 spread:陰影的尺寸,在此基礎上還要加上原來的大小。 color:陰影的顏色。 inset:可選參數,用于將外部陰影轉換為內部陰影。
使用CSS3陰影的時候,我們可以根據需要自行設置各個值,實現不同的效果。比如,如果我們只需要一個簡單的陰影效果,可以這樣寫:
box-shadow: 0 0 10px #666;
上面的代碼中,h-shadow和v-shadow都是0,表示陰影在元素中心,blur是10px,表示陰影模糊半徑為10px,color是#666,表示陰影顏色為灰色。
如果我們要添加多個陰影效果,可以用逗號隔開:
box-shadow: 0 0 10px #666, 0 0 20px #999;
上面的代碼中,我們設置了兩個陰影效果,第一個陰影的blur是10px,第二個陰影的blur是20px,這樣可以實現兩個不同半徑的陰影效果。
如果我們不需要外部陰影,而是需要內部陰影,可以添加inset:
box-shadow: inset 0 0 10px #666;
上面的代碼中,我們將最后一個參數設置為inset,表示生成內部陰影效果。
以上就是CSS3陰影的值代表什么,根據需要靈活運用,可以打造出更加炫酷的效果。
下一篇css3隱藏側邊欄