WEB基礎之：CSS 使用者介面樣式

1. 游標

cursor:default

型別	屬性值	描述
General	auto	瀏覽器根據當前內容決定指標樣式，例如當是內容是文字時使用text樣式
General	default	預設指標，通常是箭頭。
General	none	無指標被渲染
連結及狀態	context-menu	指標下有可用內容目錄。
連結及狀態	help	指示幫助
連結及狀態	pointer	懸浮於連線上時，通常為手
連結及狀態	progress	程式後臺繁忙，使用者仍可互動 (與wait相反).
連結及狀態	wait	程式繁忙，使用者不可互動 (與progress相反).圖示一般為沙漏或者表。
選擇	cell	指示單元格可被選中
選擇	crosshair	交叉指標，通常指示點陣圖中的框選
選擇	text	指示文字可被選中
選擇	vertical-text	指示垂直文字可被選中
拖拽	alias	複製或快捷方式將要被建立
拖拽	copy	指示可複製
拖拽	move	被懸浮的物體可被移動
拖拽	no-drop	當前位置不能扔下,Windows或Mac OS X中 “no-drop 與not-allowed相同”.
拖拽	not-allowed	不能執行
拖拽	grab	可抓取。grab和grabbing在比較後期才被支援，見瀏覽器相容表
拖拽	grabbing	抓取中
重設大小及滾動	all-scroll	元素可任意方向滾動 （平移）.Windows中, “all-scroll 與 move相同”.
重設大小及滾動	col-resize	元素可被重設寬度。通常被渲染為中間有一條豎線分割的左右兩個箭頭
重設大小及滾動	row-resize	元素可被重設高度。通常被渲染為中間有一條橫線分割的上下兩個箭頭
重設大小及滾動	n-resize	北邊將被移動。
重設大小及滾動	e-resize	東邊將被移動。
重設大小及滾動	s-resize	南邊將被移動。
重設大小及滾動	w-resize	西邊將被移動。
重設大小及滾動	ne-resize	東北邊將被移動。
重設大小及滾動	nw-resize	西北邊將被移動。
重設大小及滾動	se-resize	東南邊將被移動。例如元素盒的東南角被移動時使用se-resize
重設大小及滾動	sw-resize	西南邊將被移動。
重設大小及滾動	ew-resize	東西雙向重新設定大小
重設大小及滾動	ns-resize	南北雙向重新設定大小
重設大小及滾動	nesw-resize	東北西南雙向重新設定大小
重設大小及滾動	nwse-resize	西北東南雙向重新設定大小
縮放	zoom-in	指示可被放大
縮放	zoom-out	指示可被縮小
圖形游標	cur()	定製游標圖示

2. 輪廓 outline

border 和 outline 很類似，但有如下區別：
outline不佔據空間，繪製於元素內容周圍。
根據規範，outline通常是矩形，但也可以是非矩形的。

2.1 設定輪廓樣式

outline-style：屬性被用於設定一個元素輪廓的樣式。

屬性值	描述
none	預設。無輪廓。
dotted	輪廓為一系列點.
dashed	輪廓為一系列短線.
solid	輪廓為實線.
double	輪廓為兩根有空隙的線. outline-width 為線與空間的總和.
groove	輪廓呈凹下狀.
ridge	與groove相反: 輪廓呈凸起狀.
inset	輪廓呈嵌入狀.
outset	與inset相反: 輪廓呈突出狀.

2.2 輪廓寬度

outline-width 屬性用於設定一個元素的輪廓的厚度。元素輪廓是繪製於元素周圍的一條線，位於 border的外圍。

屬性值	描述
thin	取決於使用者代理。通常等同於桌面瀏覽器的 1px （包括 Firefox）。
medium	取決於使用者代理。通常等同於桌面瀏覽器的 3px （包括 Firefox）。
thick	取決於使用者代理。通常等同於桌面瀏覽器的 5px（包括 Firefox）。
length	指定輪廓粗細的值。

2.3 設定輪廓顏色

outline-color 屬性被用於設定一個元素輪廓的顏色.

屬性值	描述
<color>	輪廓顏色,規則同 <color>.
invert	反色,用於確認輪廓的顯示.注意不是所有瀏覽器都支援該屬性,若不則該屬性無效.

2.4 彙總

/* outline 屬性可使用以下一個、兩個或三個值來宣告，且順序不重要。 */
outline: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]


/* 樣式 */
outline: solid;

/* 顏色 | 樣式 */
outline: #f66 dashed;

/* 樣式 | 寬度 */
outline: inset thick;

/* 顏色 | 樣式 | 寬度 */
outline: green solid 3px;

/* 全域性值 */
outline: inherit;
outline: initial;
outline: unset;