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;
浙公网安备 33010602011771号