↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第5章 CSS3：选择器、字体和颜色模式
HSL模式基于一个360°的色相环，60°时为黄色，120°时为绿色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色
opacity设置的透明度会对整个元素产生影响，使用HSLA或RGBA则可以仅让元素的某些部分由透明效果
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { background-color: #ff0; } .p1 { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } .p2 { -moz-column-width: 12em; -webkit-column-width: 12em; column-width: 12em; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; -moz-column-rule: thin dotted #999; -webkit-column-rule: thin dotted #999; column-rule: thin dotted #999; } .p3 { width: 100px; word-wrap: break-word; } img[alt="woogle"] { border: 3px dotted #f00; } /* 匹配开头 */ img[alt^="w"] { border: 3px dotted #f00; } /* 匹配包含内容 */ img[alt*="oo"] { border: 3px dotted #f00; } /* 匹配结尾 */ img[alt$="le"] { border: 3px dotted #f00; } /* 伪类 */ p:first-child { font-weight: bold; } img:last-child { width: 150px; } p:nth-child(even) { font-size: 18px; } /* 2n+3 n+2 3n 3n-2 */ p:nth-child(2n+3) { color: rgb(254, 0, 0); } p:nth-last-child(-n+2) { font-style: italic; } .p1:nth-of-type(n+2) { font-size: 30px; } p:not(.p1) { font-size: 20px; } /* 伪元素 */ p::first-line { color: #fe0208;/*IE6 IE7 IE8*/ color: hsl(359, 99%, 50%); } p { background-color: hsla(0, 0%, 100%, 0.8); background-color: rgba(255, 255, 255, 0.8); } </style> </head> <body> <p class="p1">深夜的林幽明的墓幽灵钻进深洞的屋打开了尘吹尽了土触动我们沉睡的魂阴险的风哭泣吹动那白骨仙死瘪的铃牵引我们另个世界一颗心儿蠢蠢欲动我是一个颠疯的鬼舞动内心快烈的风我是一个清白的鬼嬉戏在了荒野尽头望见了那无知的人卖力演出无力抽身望见了那无辜的人罪无可罪救无可救</p> <p class="p2">深夜的林幽明的墓幽灵钻进深洞的屋打开了尘吹尽了土触动我们沉睡的魂阴险的风哭泣吹动那白骨仙死瘪的铃牵引我们另个世界一颗心儿蠢蠢欲动我是一个颠疯的鬼舞动内心快烈的风我是一个清白的鬼嬉戏在了荒野尽头望见了那无知的人卖力演出无力抽身望见了那无辜的人罪无可罪救无可救</p> <p class="p3">111111111111111111111111111111</p> <p class="p1">深夜的林幽明的墓幽灵钻进深洞的屋打开了尘吹尽了土触动我们沉睡的魂阴险的风哭泣吹动那白骨仙死瘪的铃牵引我们另个世界一颗心儿蠢蠢欲动我是一个颠疯的鬼舞动内心快烈的风我是一个清白的鬼嬉戏在了荒野尽头望见了那无知的人卖力演出无力抽身望见了那无辜的人罪无可罪救无可救</p> <p class="p1">深夜的林幽明的墓幽灵钻进深洞的屋打开了尘吹尽了土触动我们沉睡的魂阴险的风哭泣吹动那白骨仙死瘪的铃牵引我们另个世界一颗心儿蠢蠢欲动我是一个颠疯的鬼舞动内心快烈的风我是一个清白的鬼嬉戏在了荒野尽头望见了那无知的人卖力演出无力抽身望见了那无辜的人罪无可罪救无可救</p> <img src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" alt="woogle" /> </body> </html>
