天天看點

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  今天我們的内容是css3的text-shadow、box-shadow 和 border-radius幾個屬性的介紹,他能增強頁面布局,值得學習。

  前三個值分别代碼RBG的值,最後一個值代表透明度(0表示透明,1表示不透明)。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  RGBA可以用于任何和color有關的屬性,例如字型顔色、邊框顔色、背景顔色和陰影顔色等。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  文字陰影的結構按照這樣的順序:x-offset, y-offset, blur, 和 color。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  為x-offset設定負值會将陰影位置改變到左邊,為y-offset設定負值會将陰影位置改變到頭部。我們也可以使用RBGA設定陰影的顔色。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  你可以設定一組text-shadow,中間以逗号相隔。下面的例子使用兩個text-shadow(頂部1px 和 底部1px),為名字設定了新聞文字效果。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  邊框半徑對屬性指派的便捷寫法類似于padding和margin(例如:<code>border-radius: 20px</code>)。為了讓有些浏覽器能正确渲染效果,需要在屬性前面加字首,例如針對webkit浏覽器需要添加 "<code>-webkit-</code>" 字首,firefox浏覽器需要添加 "<code>-moz-</code>" 字首。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  你可以為不同的邊角設定不同的半徑,注意webkit和firefox浏覽器,每個邊角有不同的屬性名稱。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  盒子陰影的結構和<code>text-shadow</code> 屬性一樣,按照這樣的順序: x-offset, y-offset, blur, 和 color。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

  你可以為盒子陰影設定很多效果,例如下面的例子使用一組參數來設定效果(參數之間以逗号相隔)。

HTML5實踐 -- 介紹css3中的幾個屬性:text-shadow、box-shadow 和 border-radius

<a href="http://www.cnblogs.com/softlover/tag/HTML5%E5%AE%9E%E8%B7%B5/">HTML5實踐系列</a>

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>

繼續閱讀