CSS 基础教程
CSS 盒子模型
CSS 高级教程
CSS3 特点
CSS3 示例
CSS3 参考

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