css3渐变，倒影，多栏目布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3渐变，倒影，多栏目布局</title> 6 <style> 7 .a,.b,.c,.d,.f{width:100px;height: 30px;} 8 .a{ background: linear-gradient(skyblue,white);border: 1px solid #aaa;margin: 10px;} 9 .b{ background: linear-gradient(to right,skyblue,white);border: 1px solid #aaa;margin: 10px;} 10 .c{ background: linear-gradient(to right bottom,skyblue,white);border: 1px solid #aaa;margin: 10px;} 11 .d{ background: linear-gradient(skyblue 3%, white 90%);border: 1px solid #aaa;margin: 10px;} 12 .e{ border: 1px solid #aaa; 13 font-size: 20px; 14 color: red; 15 width:100px; 16 height: 100px; 17 -webkit-box-reflect: below -8px linear-gradient(rgba(255,0,0,1),rgba(0,0,0,0)); 18 } 19 .f{ width:80%; 20 height: 200px; 21 column-gap: 40px; 22 column-width: 100px; 23 column-count:3; 24 position:absolute; 25 left:200px ; 26 background: linear-gradient(skyblue 3%, white 90%); 27 border: 1px solid #aaa; 28 margin: 10px;} 29 h3{ 30 column-span: all; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="a"></div> 36 <div class="b"></div> 37 <div class="c"></div> 38 <div class="d"></div> 39 <div class="e">......a</div> 40 <div class="f"> 41 <h3>软件工程</h3> 42 软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计模式等方面。 43 在现代社会中，软件应用于多个方面。典型的软件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。 44 同时，各个行业几乎都有计算机软件的应用，如工业、农业、银行、航空、政府部门等。这些应用促进了经济和社会的发展，也提高了工作效率和生活效率。 45 </div> 46 </body> 47 </html>
效果：
