CSS3 用户界面

在 CSS3 中, 增加了resize，box-sizing，outline-offset一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

你将在本章中学习这几个属性：

• resize
• box-sizing
• outline-offset

浏览器支持

CSS3中的一些新特性，并不是所有浏览器都支持，本章节中讲解的这几个属性，浏览器执行情况如下：

CSS 调整元素大小

在 CSS3中的 resize 属性规定元素是否可以被用户调整大小。需要注意，Internet Explorer 不支持 resize 属性。

下例示例中，演示只允许用户调整 <div> 元素的宽度和高度：

div
{
    resize:both;
    overflow:auto;
}

如果只允许宽度或高度的调整，需要修改resize的值：

• horizontal 宽度
• vertical 高度

需要注意，在大多数浏览器中，textarea默认是允许调整其高度和宽度的，如果要补允许默认调整textarea的宽度和高度，我们可以通过设置其resize属性来实现，如下例：

textarea {
  resize: none;
}

CSS3 盒子边框大小调整(Box Sizing)

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。例如下面的示例，规定两个并排的带边框方框：

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}

CSS3 外边框轮廓修饰（outline-offset ）

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

轮廓与边框有两点不同：

• 轮廓不占用空间
• 轮廓可能是非矩形

这个 div 在边框之外 15 像素处有一个轮廓。

CSS 代码如下:

div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}

CSS3中用户界面特性