增强用户界面

在 CSS3 中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸、外边框等，

关键词：

box-sizing、resize、outline-width、outline-style、outline-color、outline

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

如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll
resize开发严谨兼容写法

textarea{
    /*默认写法*/
    resize:horizontal ;
    /*chrome、safari、移动端浏览器*/
    -webkit-resize:horizontal ;
    /*火狐Firefox*/
    -moz-resize:horizontal;
    /*欧朋浏览器*/
    -0-resize:horizontal;
    /*IE浏览器*/
    -ms-resize-resize:horizontal;
}

** resize案例：**

div
{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}

效果

box-sizing属性

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

div.container
{
	width:30em;
	border:1em solid;
}
div.box
{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid red;
	float:left;
}

效果

outline属性