# 第 19 章 CSS 其他樣式 學習要點： 1.顏色和透明度 2.盒子陰影和輪廓 3.光標樣式 主講教師：李炎恢 本章主要探討 HTML5?中 CSS?其他剩下幾個常用的樣式，包括顏色、透明度、盒子的陰影輪廓以及光標的樣式。 **一．顏色和透明度** 顏色我們之前其實已經用的很多了，比如字體顏色、背景顏色、邊框顏色。但除了背景顏色和邊框顏色講解過，字體顏色卻沒有系統的講解過。設置字體顏色其實也成為文本塊的前景色。 | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | color | 顏色值 | 設置文本前景色 | 1 | ``` p { color: red; } ``` 解釋：設置文本顏色。 CSS3 提供了一個屬性?opacity，可以設置元素的透明度。 | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | opacity | 0 ~ 1 | 設置元素的透明度 | 3 | ``` p { color: red; opacity: 0.5; } ``` 解釋：設置元素的透明度。 **二．盒子陰影和輪廓** **1.box-shadow** CSS3 提供了一個非常實用的效果樣式，就是陰影效果。通過?box-shadow 屬性來實現，樣式表如下： ? ``` div { width: 200px; height: 200px; border: 10px solid silver; box-shadow: 5px 4px 10px 2px gray; } ``` 解釋：給元素盒子增加陰影效果。 ``` box-shadow: 5px 4px 10px 2px gray inset; ``` 解釋：實現內部陰影。 **2.outline** CSS3 還提供了輪廓樣式，它和邊框一樣，只不過它可以在邊框的外圍再加一層。樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | outline-color | 顏色 | 外圍輪廓的顏色 | 3 | | outline-offset | 長度 | 輪廓距離元素邊框邊緣的偏移量 | 3 | | outline-style | 樣式 | 輪廓樣式，和 border-style?一致 | 3 | | ontline-witdh | 長度 | 輪廓寬度 | 3 | | outline | 簡寫 | <顏色> <樣式> <寬度> | 3 | ``` div { width: 200px; height: 200px; border: 10px solid silver; outline: 10px double red; } ``` 解釋：在邊框的外圍再增加一圈輪廓。 **三．光標樣式** 我們不但可以指定頁面上的元素樣式，就連光標的樣式也可以指定。樣式表如下： | **屬性** | **值** | **說明** | **CSS 版本** | | --- | --- | | cursor | 光標樣式 | auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll | 1 | ``` div { cursor: move; } ``` 解釋：設置當前元素的光標為移動光標。