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;
}