CSS3---增强用户界面

【前言】在 CSS3 中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸、外边框等，本节来依次介绍下。

【内容】
主要介绍以下的用户界面属性
浏览器支持，如下图所示

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

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

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

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


语法：outline:none;

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

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

box-sizing属性
分类：盒子模型分为标准盒模型和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

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



由效果图可以得出外轮廓线不占用网页布局空间。

案例：设置表单元素轮廓线正确写法
这里需要结合CSS3的焦点聚焦选择器:focus

:focus 选择器用于选取获得焦点的元素，接收键盘事件或其他用户输入的元素都允许 :focus 选择器
重点属性outline-offset：
简介：outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓