用純CSS3實現QQ LOGO

 
         在微博上看到有新浪的朋友用CSS3實現的新浪微博LOGO（如下圖所示），一時手癢，就順手也用CSS3實現了一個QQ的LOGO。

         Demo的地址見：http://namepk.sinaapp.com/qq.html，目前只支持Chrome觀看，效果如下圖所示：

         主要用到的CSS3屬性如下所示：
         1、 
border-radius
         CSS3中應用最普遍的屬性，用於設置邊框圓角，可以采用border-top-left-radius的方式單獨設置每個圓角，並可以設置。
         1）例如要實現1個圓，可以使用如下代碼：
width: 240px;
height: 240px;
-webkit-border-radius: 120px; 
         效果如下圖所示：

         2）要實現1/4個圓，可以用如下代碼：
width: 240px;
height: 240px;
-webkit-border-bottom-left-radius: 240px 240px; 
         效果如下圖所示：

         3）要實現1/8個圓，可以用如下代碼：
border-top: 240px solid #2ec8e9;
-webkit-border-top-left-radius: 240px;
width: 240px; 

         2、 
-webkit-transform
         主要使用了rotate旋轉屬性，可以控制元素向左向右旋轉。下圖裏的箭頭就是用-webkit-transform:rotate屬性實現的（具體實現方式參考我的博客《利用CSS3特性巧妙實現漂亮的DIV箭頭》一文）。順便提一句scale縮放屬性裏如果值為-1，也是有旋轉效果的。

         3、 
-webkit-box-shadow
         盒陰影，可以設置元素的陰影。如上圖所示。
         4、 
RGBA
         RGBA也是CSS3中非常實用和強大的一個功能，以前所有使用RGB HTML的地方都可以使用RGBA的格式來設置透明度。例如QQ瀏覽器的九宮格可以做成如下顯示方式：

         這就是采用RGBA的透明效果實現的，具體實現方式可以參考我的博客《瀏覽器九宮格的簡單實現》一文。