其他

阅读1540485

更新时间2025-08-27

媒体查询

渐变(Gradients)

在本教程中，我们将学习更多有趣的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;
}

媒体查询

渐变(Gradients)

RELATED VIDEOS