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


  轉載請注明原創地址:http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html

 

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

  RGBA

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

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

 

  文字陰影

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

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

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

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

 

  邊框半徑

  邊框半徑對屬性賦值的便捷寫法類似於padding和margin(例如:border-radius: 20px)。為了讓有些瀏覽器能正確渲染效果,需要在屬性前面加前綴,例如針對webkit瀏覽器需要添加 "-webkit-" 前綴,firefox瀏覽器需要添加 "-moz-" 前綴。

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

 

  盒子陰影

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

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

-moz-box-shadow: 
-2px -2px 0 #fff, 
2px 2px 0 #bb9595, 
2px 4px 15px rgba(0, 0, 0, .3);

 

原文地址:http://webdesignerwall.com/tutorials/the-basics-of-css3

 

HTML5實踐系列


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM