个性化阅读
专注于IT技术分析

css3扩展特性 – CSS3高级教程

点击下载

上一章CSS3高级教程请查看:css3媒体查询和响应式设计

在本教程中,我们将学习一些更有趣的CSS3特性。

使用CSS3扩展用户界面

在本章中,我们将讨论一些有趣的与CSS3相关的用户界面属性,如resize, outline-offset等,你可以使用它们来增强web页面。

调整元素

你可以使用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,用于设置大纲和元素边框之间的空间。此属性可以接受负值,这意味着您也可以将outline放在元素中。

p, div {
    margin: 50px;
    height: 100px;
    background: #000;
    outline: 2px solid red;
}
p {
    outline-offset: 10px;
}
div {
    outline-offset: -15px;
}
赞(0)
未经允许不得转载:srcmini » css3扩展特性 – CSS3高级教程

评论 抢沙发

评论前必须登录!