1840次阅读
零星的CSS3特性
首先来看看多重背景吧。
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>CSS3的零星知识点</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="multi"></div> </body>check the result
css：
.multi {
width : 300px;
height : 300px;
background : url("pic1.jpg") 20px 0px no-repeat,
url("pic2.png") 0px 0px no-repeat;
}
多重背景其实很简单，CSS3允许我们书写多个background的规则，浏览器会把它们渲染出来，这就是多重背景。
text-overflow是当文本过长时的截断策略，word-wrap也是，看个例子：
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>CSS3的零星知识点</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="word">You cannot improve your past, but you can improve your future. Once time is wasted, life is wasted</div> <div class="normal">this is a very long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord, and it will come out of box.</div> <div class="normal wrap">this is a very long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord, and it will come out of box.</div> </body>check the result
css：
.word {
width : 300px;
height : 30px;
line-height : 30px;
border : 1px solid red;
text-overflow : ellipsis;
overflow : hidden;
white-space : nowrap;
}
.normal {
width : 300px;
line-height : 30px;
background-color : pink;
margin-top : 100px;
}
.wrap {
word-wrap : break-word;
}
text-overflow : ellipsis;可以让文字超出的部分变成省略号，但是这个属性一定要和overflow : hidden;white-space : nowrap;配合使用，overflow : hidden;是让超出部分不显示，white-space : nowrap;是让文字不换行。word-wrap我们在petshow中用过，它的作用是对于一个很长的单词，超出了box，可以强行打断，防止它超出盒子。
再来看看多列布局，它可以让我们的版式大变样：
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>CSS3的零星知识点</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div> 当春风再一次吹拂她的脸庞时，那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复，仿佛重生一般，花儿般的笑颜又重新浮上了她的脸庞。而他， 看到她康复的样子，高兴极了，但他却不会讲什么，依旧如故，默默地陪在她身旁。他爱她，就包括爱她的一切缺点。这样做，他并不觉得有失尊严。他认为既然爱 了，就应该无怨无悔。而她，觉得开始有点喜欢上了他，有些依赖他。但她认为，离爱还很遥远。<br/> 转眼她和他都要毕业了，她甚至没有征求他的意见，就直接去了北方的一座城市，而他，却追随着她也到了这里。本来，在南方那座城市，他的家人早已给他联系好 了一家不错的公司，但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工，难免心神俱疲，这个时候，她就很想找一个依靠，给她一点 家的温暖。明明知道他一直愿意做她的依靠，可她却不愿意把自己的一生交付于他，因为她觉得自己一直不爱他，不爱，又如何依靠，再说，他也不能提供给她想像 中的生活。 </div> <div class="div1"> 当春风再一次吹拂她的脸庞时，那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复，仿佛重生一般，花儿般的笑颜又重新浮上了她的脸庞。而他， 看到她康复的样子，高兴极了，但他却不会讲什么，依旧如故，默默地陪在她身旁。他爱她，就包括爱她的一切缺点。这样做，他并不觉得有失尊严。他认为既然爱 了，就应该无怨无悔。而她，觉得开始有点喜欢上了他，有些依赖他。但她认为，离爱还很遥远。<br/> 转眼她和他都要毕业了，她甚至没有征求他的意见，就直接去了北方的一座城市，而他，却追随着她也到了这里。本来，在南方那座城市，他的家人早已给他联系好 了一家不错的公司，但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工，难免心神俱疲，这个时候，她就很想找一个依靠，给她一点 家的温暖。明明知道他一直愿意做她的依靠，可她却不愿意把自己的一生交付于他，因为她觉得自己一直不爱他，不爱，又如何依靠，再说，他也不能提供给她想像 中的生活。 </div> <hr/> <div class="div2"> 当春风再一次吹拂她的脸庞时，那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复，仿佛重生一般，花儿般的笑颜又重新浮上了她的脸庞。而 他，看到她康复的样子，高兴极了，但他却不会讲什么，依旧如故，默默地陪在她身旁。他爱她，就包括爱她的一切缺点。这样做，他并不觉得有失尊严。他认为既 然爱了，就应该无怨无悔。而她，觉得开始有点喜欢上了他，有些依赖他。但她认为，离爱还很遥远。<br/> 转眼她和他都要毕业了，她甚至没有征求他的意见，就直接去了北方的一座城市，而他，却追随着她也到了这里。本来，在南方那座城市，他的家人早已给他联系好 了一家不错的公司，但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工，难免心神俱疲，这个时候，她就很想找一个依靠，给她一点 家的温暖。明明知道他一直愿意做她的依靠，可她却不愿意把自己的一生交付于他，因为她觉得自己一直不爱他，不爱，又如何依靠，再说，他也不能提供给她想像 中的生活。 </div> </body>check the result
css：
div {
margin-top : 40px;
}
.div1{
-moz-column-count : 2;
-webkit-column-count : 2;
}
.div2{
border : 6px solid orange;
padding : 6px;
text-align : justify;
-moz-column-width : 20em;
-moz-column-gap : 3em;
-moz-column-rule : 6px solid blue;
-webkit-column-width : 20em;
-webkit-column-gap : 5em;
-webkit-column-rule : 6px solid blue;
}
怎么样，是不是看上去有点像报纸，如果要做一个报纸的网站，那么这个样式就应用得很广泛了。最简单的就是用column-count来指定列数。当然我们还有很多其他的属性可以设置，如div2中的属性。
最后我们来看看CSS3中最重要的一个特性，响应式，也就是媒体查询，它是为了手机网页而存在的，我们来简单的看一看：
html：
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>CSS3的零星知识点</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="mydiv">我们从来都是爱的迫切，却从来不去注重爱的方式。其实人是一个多元的复变函数。一个女人是一个好妻子的同时，她未必是个好儿媳妇。但是人性当中又有很多恒定的东西。比如说不能成为一个孝顺的儿子，他就一定不能成为一个有真爱的丈夫。这是一体的。父母对子女的培育足以让我们穷尽一生去报答。如果没有父母，我们不过是个小小的细胞，而不可能存活。虽然将来陪伴我们度过一生的是自己的伴侣。但是如果没有父母赐予我们生命，这一切都不可能发生。对于一个男人来说，这一生最重要的有三个女人。分别是母亲、妻子、女儿。母亲是给自己生命的，妻子是陪自己走完一生的，而女儿是自己生命的延续。抽掉当中的任何一段都是不完整的。</div> </body>check the result
css：
@media (max-width:800px) {
.mydiv {
margin : 100px;
background-color : gray;
}
}
@media (min-width:800px) and (max-width:1200px) {
.mydiv {
margin : 100px;
background-color : black;
color : white;
}
}
@media (min-width:1200px) {
.mydiv {
margin : 100px;
background-color : pink;
border : 1px solid red;
}
}
拖动浏览器，改变宽度，看看效果。通过@media (max-width:800px)来指定在什么样的宽度范围内，该使用什么样的样式。通过这个属性，我们就能够在手机、pad和电脑上构建出不同样式的网页去适配这些终端。
到此，CSS3的新特性介绍完毕，很多、很炫、很酷，真是高端大气上档次，狂暴酷炫屌炸天，这样的功能，有什么理由不去掌握呢。
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助
，不要超过100元哦！
，不要超过100元哦！
评论请先登录