css3的新屬性陰影屬性

2021-07-26 18:12:07 字數 1305 閱讀 2276

css3的新屬性陰影屬性:box-shadow;

ie9+、firefox 4、chrome、opera 以及 safari 5.1.1 支援 box-shadow 屬性。

語法是:

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow有六個可設值:

img當不設陰影型別時,預設為投影效果。當設為inset時,為內陰影效果。x軸和y軸位移不等同但類似於photoshop裡面的」角度」和」位置。陰影大小、擴充套件、顏色和photoshop裡面的都同理。

h-shadow

必需。水平陰影的位置。允許負值。

v-shadow

必需。垂直陰影的位置。允許負值。

blur

可選。模糊距離。

spread

可選。陰影的尺寸。

color

可選。陰影的顏色。請參閱 css 顏色值。

inset

可選。將外部陰影 (outset) 改為內部陰影。

應用例項:陰影大小 陰影擴充套件 陰影顏色

效果圖:

在實際使用中,把-moz-box-shadow和-webkit-shadow也寫上。在它們前面分別加上-moz-和-webkit-。

CSS3的新屬性

1.線性漸變 linear 線性 gradient 漸變 background image webkit linear gradient top,red 50 yellow 50 yellow90 2.徑向漸變 可以設定數值 百分比 英文 background image webkit radial...

css3邊框新屬性

通過css3,可以建立圓角邊框 border radius 向矩形新增陰影 border shadow 甚至使用 border image 來繪製邊框。圓角邊框 div 取值 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radius 由浮點數字和單位識別符號組成...

css3新屬性學習

box size width 這樣就可以讓我們不必要再去計算盒子增減內邊距後有沒有撐開什麼的,因為無論內邊距如何變化,盒子的大小始終只會等於width。filter blur 5px 濾鏡,css3為我們增加了濾鏡效果,當括號中的數值越大,則越模糊。width calc 100 30px 可以自動計...