改善用户界面常用元素

目录

轮廓线outline

 重置元素大小risize

 css鼠标样式汇总

常用值

---

轮廓线outline

概述

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

outline简写

• 可以在一个声明中设置所有的轮廓属性。

• 可以设置的属性分别是（按顺序）： outline-color, outline-style, outline-width

  • 说明：轮廓样式 outline-style 轮廓颜色 outline-color，轮廓宽度 outline-width

  • 语法：空格隔开

比如说修改input元素身上的外轮廓

input{
           outline:none;
            border:none;//清除默认的
            border:1px solid yellowgreen;

}

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

 重置元素大小risize

默认：文本域可以用户可以通过鼠标拖拽改变大小resize: none指定一个元素不允许用户调整大小

 textarea {
            width: 300px;
            height: 250px;
            /* resize重置宽高  用户可以不可以通过鼠标拖拽修改宽高 */
            resize: none;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 用户可以拖拽改变.box宽高 */
            resize: both;
            /* 触发BFC渲染规则 */
            overflow: hidden;
        }

 css鼠标样式汇总

通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状  

常用值

• 默认值： auto

• default 默认光标（通常是一个箭头）

• auto 默认。浏览器设置的光标。

• crosshair 光标呈现为十字线。

• pointer 光标呈现为指示链接的指针（一只手）

• move 此光标指示某对象可被移动。

其他值

e-resize    此光标指示矩形框的边缘可被向右（东）移动。
ne-resize    此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize    此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize    此光标指示矩形框的边缘可被向上（北）移动。
se-resize    此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize    此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize    此光标指示矩形框的边缘可被向下移动（南）。
w-resize    此光标指示矩形框的边缘可被向左移动（西）。
text    此光标指示文本。
wait    此光标指示程序正忙（通常是一只表或沙漏）。
help    此光标指示可用的帮助（通常是一个问号或一个气球）。 

progress :比wait多了默认光标的沙漏  加载进度

 cursor:url(.png),url(.ico),auto;

    url(图片地址)

auto如果这个图片没加载出来那么就采用默认样式

  要求：图片必须小于几kb