CSS3---增强用户界面

前言

关键词：
box-sizing、resize、outline-width、outline-style、outline-color、outline
常见用户界面属性
本节重点主要介绍以下的用户界面属性
浏览器支持，如下图所示

resize属性

resize属性规定用户是否可以调整元素尺寸，常用属性值如下

注意：
如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

resize开发严谨兼容写法：
在日常开发里，如果代码严谨要求度较高，最好依次加上浏览器兼容前缀，例如通过resize属性，让文本域可以沿水平方向拖大。代码为：

resize案例：

resize常见应用场景：
去除文本域textarea自带样式

语法：outline:none;

box-sizing属性

box-sizing 属性允许以确切的方式定义适应某个区域的具体内容，通俗理解就是定义盒子模型。

浏览器兼容：
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

分类：
盒子模型分为标准盒模型和IE怪异盒模型
区别：
标准盒模型的width和height就是content的宽高；而IE盒模型的width和height则是由content+padding+border组成。
开发写法：
为了兼容不同的浏览器，我们通常使用box-sizing来将标准盒模型变为IE盒模型（反之也可以，只要统一标准就行）

outline属性

简介：
在一个声明中设置所有的轮廓属性，外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，属于一种动态样式，对于表单元素只有元素获取到焦点或被激活时呈现，如果在其他元素中设置，一般可起到突出元素的作用。

语法：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

outline外轮廓线集成属性（类似于border）

案例：
设置普通元素轮廓线

案例：
设置表单元素轮廓线

案例：
设置表单元素轮廓线正确写法

这里需要结合CSS3的焦点聚焦选择器:focus

:focus 选择器
用于选取获得焦点的元素，接收键盘事件或其他用户输入的元素都允许 :focus 选择器

重点属性outline-offset：

简介：
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

案例：
设置轮廓线与边框之间的距离

注意：
外轮廓线不占用网页布局空间，此时再次聚焦时，输入框边框外侧10px出现轮廓线