CSS3 其他

在本教程中，我們將學(xué)習(xí)更多有趣的CSS3功能。

使用CSS3擴(kuò)展用戶界面

在本章中，我們將討論的一些有趣的用戶界面相關(guān)的CSS3屬性一樣resize，outline-offset等等，你可以用它來提高你的網(wǎng)頁。

調(diào)整元素大小

您可以使用CSS3 resize屬性將元素水平，垂直或雙向調(diào)整大小。但是，此屬性通常用于從<textarea>窗體控件中刪除默認(rèn)的可調(diào)整大小的行為。

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

設(shè)置輪廓偏移

在上一節(jié)中，您學(xué)習(xí)了如何為輪廓設(shè)置不同的屬性，例如寬度，顏色和樣式。但是，CSS3提供了另一種屬性，outline-offset用于設(shè)置輪廓和元素邊框之間的空間。該屬性可以接受負(fù)值，這意味著您也可以在元素內(nèi)放置輪廓。

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