一、css3用户界面
我们使用css3的新属性，可以自由的控制页面当中某个元素的大小，可以设置外边框以突出重点，可以轻松的实现报纸版面的排列效果(多列)，可以重定义盒子模型的呈现形式
二、css3多列
通过 CSS3，能够创建多个列来对文本进行布局 - 就像报纸那样
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
column-count： 规定元素应该被分隔的列数。
column-gap： 规定列之间的间隔 如：-webkit-column-gap:10px;
column-rule： 设置所有 column-rule-* 属性的简写属性。如：-webkit-column-rule:1px solid red;
column-width： 规定列的宽度。如：-webkit-column-width:100px;
示例：
效果如下：
三、resize
resize 属性规定是否可由用户调整元素的尺寸。
语法：resize: none|both|horizontal|vertical;
none： 用户无法调整元素的尺寸。
both： 用户可调整元素的高度和宽度。
horizontal： 用户可调整元素的宽度。
vertical： 用户可调整元素的高度。
四、box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
浏览器支持
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
Safari 支持替代的 -webkit-box-sizing 属性
语法：box-sizing: content-box|border-box|inherit;
content-box： 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box： 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit： 规定应从父元素继承 box-sizing 属性的值。
示例：
1）
<style>
div{width:200px; height:200px; border:1px solid red;}
</style>
<script>
window.onload=function(){
var div = document.getElementsByTagName("div")[0];
alert(div.offsetWidth); //此时显示的是202（宽+边框）如果有padding，也会加上padding box-sizing:content-box 即是默认这种类型
}
</script>
<div></div>
2）
<style>
div{width:200px; height:200px; border:1px solid red;
-webkit-box-sizing: border-box;}
</style>
<script>
window.onload=function(){
var div = document.getElementsByTagName("div")[0];
alert(div.offsetWidth); //此时显示的是200（自身的宽）
}
</script>
<div></div>
五、outline
outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用，
浏览器支持
所有主流浏览器都支持 outline 属性，除了 Internet Explorer。
语法：outline：[outline-color] || [outline-style] || [outline-width] ||[outline-offset] | inherit
<outline-color>： 指定轮廓边框颜色。
<outline-style>： 指定轮廓边框轮廓。
<outline-width>： 指定轮廓边框宽度。
<outline-offset>： 指定轮廓边框偏移位置的数值。参见outline-offset
示例：
<style>
div{width:200px; height:200px; border:1px solid red;
outline:2px solid green;}
</style>
<div></div>
效果如图：
六、outline-offset
outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。轮廓不占用空间
浏览器支持
所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。
语法：outline-offset: length|inherit;
length： 轮廓与边框边缘的距离。
inherit： 规定应从父元素继承 outline-offset 属性的值。
<style>
div{width:200px; height:200px; border:1px solid red;
outline:2px solid green; outline-offset:4px;}
</style>
<div></div>
效果如图：
且外边框不会占据空间位置
