CSS 用户界面属性
## (1)轮廓线
概述:轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。
输入框边缘外的线
outline简写
- 在一个声明中设置所有的轮廓属性。
- 可以设置的属性分别是(按顺序):
outline-color, outline-style, outline-width
- 说明:
- 轮廓样式 outline-style
- 轮廓颜色 outline-color
- 轮廓宽度 outline-width
- 语法:空格隔开
- 取值:参考边框
- 清除设置 input ,textarea的轮廓线
```css
input, textarea {
/* 清除轮廓线 */
outline: none;
/* 设置轮廓线 */
outline: 1px solid red;
}
```
## (2)用户界面
### 1)文本域的resize属性:用户是否可以对元素尺寸进行调整
- resize: none; 不允许用户手动调整元素的尺寸
- resize: both; 用户可以调整元素的宽度和高度
- resize: horizontal; 用户可以调整元素的宽度
- resize: vertical; 用户可以调整元素的高度
## CSS 鼠标样式
通过在CSS中,cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状
- 常用值
- 默认值:auto
- default 通常是一个箭头
- text 显示为光标
- pointer 光标呈现为指示链接的指针(一只手)
- move 此光标指示某对象可被移动。
- 其他值
```html
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
```
```html
<ul>
<li style="cursor:auto">auto</li>
<li style="cursor:crosshair">Crosshair</li>
<li style="cursor:default"> Default</li>
<li style="cursor:pointer"> Pointer</li>
<li style="cursor:move"> Move</li>
<li style="cursor:e-resize"> e-resize</li>
<li style="cursor:ne-resize"> ne-resize</li>
<li style="cursor:nw-resize"> nw-resize</li>
<li style="cursor:n-resize"> n-resize</li>
<li style="cursor:se-resize"> se-resize</li>
<li style="cursor:sw-resize"> sw-resize</li>
<li style="cursor:s-resize"> s-resize</li>
<li style="cursor:w-resize"> w-resize</li>
<li style="cursor:text"> text</li>
<li style="cursor:wait"> wait</li>
<li style="cursor:help"> help</li>
</ul>
```