上一节:
下一节:

  CSS 用户界面

  • CSS多列

    在本章中，您将了解以下CSS用户界面属性：
    • resize
    • outline-offset

  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。后跟-webkit-或-moz-的数字指定使用前缀的第一个版本。
    属性 Internet Explorer Chrome FireFox Safari Opera
    属性名
    resize 15.0 4.0 5.0 4.0-moz- 4.0 15.0
    outline-offset 15.0 4.0 5.0 4.0-moz- 4.0 9.5

  • CSS调整大小

    resize属性指定用户是否应该（以及如何）调整元素的大小。
    这个div元素可由用户调整大小！调整大小： 单击并拖动此div元素的右下角。 注意： Internet Explorer不支持resize属性。
    以下示例允许用户仅调整<div>元素的宽度： 
    div {
 resize: horizontal;
 overflow: auto;
}
    尝试一下
    以下示例允许用户仅调整<div>元素的高度： 
    div {
 resize: vertical;
 overflow: auto;
}
    尝试一下
    以下示例允许用户调整<div>元素的高度和宽度： 
    div {
 resize: both;
 overflow: auto;
}
    尝试一下
    在许多浏览器中，默认情况下<textarea>可以调整大小。在这里，我们使用resize属性来禁用可调整性： 
    textarea {
 resize: none;
}
    尝试一下

  • CSS outline-offset

    outline-offset属性在轮廓与元素的边或边框之间添加空格。 轮廓（outline）在两个方面与边界（border）不同：
    • 轮廓线是在边界边缘外围的元素绘制的线
    • 轮廓不占用空间
    该div的边界外边缘有15px的轮廓。 
    div.ex1 {
 margin: 20px;
 border: 1px solid black;
 outline: 4px solid red;
 outline-offset: 15px;
} 

div.ex2 {
 margin: 10px;
 border: 1px solid black;
 outline: 5px dashed blue;
 outline-offset: 5px;
}
    尝试一下

  • CSS用户界面属性

    下表列出了所有用户界面属性：
    属性 描述
    outline-offset 在轮廓和元素的边或边框之间添加空格
    resize 指定元素是否可由用户调整大小
上一节:
下一节: