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 属性被用于设置一个元素轮廓的颜色.

属性值	描述
	轮廓颜色,规则同 .
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;