CSS3 雜項

Created: October-16, 2018

在本教程中，我們將學習更多有趣的 CSS3 功能。

使用 CSS3 擴充套件使用者介面

在本章中，我們將討論關於像一些有趣的使用者介面相關的 CSS3 屬性，比如 resize ， outline-offset 等等，你可以用它來增強你的網頁。

調整元素大小

你可以使用 CSS3 resize 屬性使元素在水平，垂直或兩個方向上可調整大小。但是，此屬性通常用於從表單 <textarea> 控制元件中刪除預設的可調整大小的行為。

p, div, textarea {
    width: 300px;
    min-height: 100px;
    overflow: auto;
    border: 1px solid black;
}
p {
   resize: horizontal; 
}
div {
    resize: both;
}
textarea {
    resize: none;
}

設定輪廓偏移

在上一節中，你已經學習瞭如何為寬度，顏色和樣式等輪廓設定不同的屬性。但是，CSS3 提供了另一個屬性， outline-offset 用於設定元素的輪廓和邊框邊緣之間的空間。此屬性可以接受負值，這意味著你還可以將輪廓放在元素中。

p, div {
    margin: 50px;
    height: 100px;
    background: #000;
    outline: 2px solid red;
}
p {
    outline-offset: 10px;
}
div {
    outline-offset: -15px;
}