用户界面样式

光标类型

1cursor: default | pointer | text | move;
属性值 效果
default 默认值, 通常是箭头
pointer 小手工具,提示用户可以点击
text 工字型,提示用户可以选择文字
move 十字光标,提示用户可以移动
wait 等待,加载中
not-allowed 禁用

轮廓

给表单添加 outline: 0; 或者 outline: none; 样式之后,就可以去掉默认的蓝色边框。

1input {
2 	outline: none; 
3 }
  • outline:outline-width || outline-style || outline-color
    • outline-width :指定轮廓边框的宽度。
      • <length>:用长度值来定义轮廓的厚度。不允许负值
      • medium:定义默认宽度的轮廓。
      • thin:定义比默认宽度细的轮廓。
      • thick:定义比默认宽度粗的轮廓。
    • outline-style :指定轮廓边框的样式。
      • <color>:指定颜色。
      • invert:使用背景色的反色。该参数值目前仅在IE及Opera下有效
    • outline-color :指定轮廓边框的颜色。
      • none:无轮廓。与任何指定的 outline-width 值无关

      • dotted:点状轮廓。

      • dashed:虚线轮廓。

      • solid:实线轮廓

      • double:双线轮廓。两条单线与其间隔的和等于指定的 outline-width 值

      • groove:3D凹槽轮廓。

      • ridge:3D凸槽轮廓。

      • inset:3D凹边轮廓。

      • outset:3D凸边轮廓。

outline是复合属性不占据布局空间,不会影响元素的尺寸;

应用:修改聚焦时input的边框

防止拖拽文本域 resize

  • 实际开发中,我们文本域右下角是不可以拖拽的。

    1textarea{ 
    2	resize: none;
    3}