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>效果：
css3渐变，倒影，多栏目布局
原文地址：http://www.cnblogs.com/gaoxuerong123/p/7816176.html