CSS 用戶界面

CSS 用戶界面

在本章中，您將學到以下 CSS 用戶界面屬性：

  • resize
  • outline-offset

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

屬性 Chrome IE Firefox Safari Opera
resize 4.0 不支持 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 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 屬性在輪廓與元素的邊緣邊框之間添加空間。

這個 div 在邊框邊緣外有 15px 的輪廓。

注意：輪廓與邊框不同！與邊框不同，輪廓線是在元素邊框之外繪制的，并且可能與其他內容重疊。同時，輪廓也不是元素尺寸的一部分：元素的總寬度和高度不受輪廓線寬度的影響。

下面的例子使用 outline-offset 屬性添加了邊框和輪廓之間的空間：

實例

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 規定元素是否可由用戶調整大小。