IT兄弟連 HTML5教程 CSS3揭秘 CSS3屬性5

• 2019 年 11 月 12 日
• 筆記

9 透明屬性

元素透明也是我們常用的樣式，在CSS2中使用濾鏡屬性opacity實現透明效果。現在有了CSS3的rgba屬性，就不用這麼麻煩了，當然這也得要瀏覽器支援才行。通常我們定義顏色都是用十六進位表示。例如，background:#000000，表示背景色為黑色。當然也可以用RGB三原色值表示，例如，background:rgb(0,0,0)，也表示背景色為黑色。RGBA只是在RGB的基礎上增加了一個A，這個A表示透明度。而且這個屬性不會被子元素繼承下去，可以在定義顏色的屬性時使用。應用程式碼如下：

除了IE，其他瀏覽器幾乎都支援rgba函數。該函數有4個參數，前3個參數為一種顏色的RGB值，第4個參數為透明度。

10 旋轉屬性

在CSS3中，可以使用transform屬性對元素進行旋轉、放縮、傾斜、平移。以旋轉為例，程式碼如下所示：

除了早期版本的IE，其他瀏覽器都可以使用rotate函數來實現某個對象的旋轉。比如rotate(7.5deg)表示順時針旋轉7.5°（degree）。利用CSS3，還可以完成skew（扭曲）和scale（縮放），以及css transitions（動態變換）等操作。

11 伺服器端字體屬性

設計網頁的時候，可能會用到某種特殊的字體。如果用戶的機器中沒有安裝這種字體，那麼文字只能以普通字體顯示。CSS3可以讓用戶的瀏覽器自行下載伺服器端字體，這樣就能呈現出設計者想要的效果。應用示例程式碼如下所示：

需要注意的是，字體文件必須與網頁文件來自同一個域名，符合瀏覽器的「同源政策」。另外，由於中文字體文件太大，伺服器端字體顯然只適用於英文字體。