界面样式, 可以更改一些用户的操作样式,以提高的用户体验。

鼠标样式 cursor

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。cursor 常见的属性值有:

属性值 描述
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

轮廓线 outline

  1. outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
  1. outline : outline-color ||outline-style || outline-width

outline.png

  1. 常见的写法是去除轮廓线(用于初始化)
input {
    outline: none;
}

调整大小 resize

resize 属性规定是否可由用户调整元素的尺寸

34textarea.png

常常去除文本域拖拽

<textarea  style="resize: none;"></textarea>

总结

属性 用途 用途
cursor 更改鼠标样式 样式很多,重点记住 pointer
outline 表单默认有轮廓线 一般直接去掉默认轮廓线
resize 主要针对文本域去除拖拽 防止用户随意拖拽文本域,造成页面布局混乱,常设置resize:none