上一节:
下一节:

  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 指定元素是否可由用户调整大小
上一节:
下一节: