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;