CSS 使用者介面

在本章中，您將學習以下 CSS 使用者介面屬性

resize
outline-offset

瀏覽器支援

表中的數字指定了完全支援該屬性的第一個瀏覽器版本。

屬性
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSS 尺寸調整

resize 屬性指定使用者是否（以及如何）可以調整元素的大小。

此 div 元素可由使用者調整大小！

調整大小：單擊並拖動此 div 元素的右下角。

以下示例允許使用者僅調整 <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;
}

自己動手試一試 »