上一章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扩展特性 – CSS3高级教程】在前面教程中,你已经学习了如何为轮廓设置不同的属性,如宽度、颜色和样式。但是,CSS3提供了一个额外的属性outline-offset,用于设置大纲和元素边框之间的空间。此属性可以接受负值,这意味着您也可以将outline放在元素中。
p, div {
margin: 50px;
height: 100px;
background: #000;
outline: 2px solid red;
}
p {
outline-offset: 10px;
}
div {
outline-offset: -15px;
}
推荐阅读
- css3属性参考文档 – CSS3高级教程
- css3媒体查询和响应式设计 – CSS3高级教程
- css3 滤镜filters – CSS3高级教程
- css3 flexbox弹性布局 – CSS3高级教程
- css3框大小box-sizing – CSS3高级教程
- css3多栏布局 – CSS3高级教程
- css3动画animation – CSS3高级教程
- css3转换translation – CSS3高级教程
- 操作系统中的分段是怎么样的()