CSS3 雜項
在本教程中,我們將學習更多有趣的 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;
}