1.容器垂直居中
1 比如，有一大一小两个容器，请问如何将小容器垂直居中 2 3 <div id="big"> 4 5 <div id="small"> 6 7 </div> 8 9 </div> 10 11 首先，将大容器的定位为relative。 12 13 div#big{ 14 15 position:relative; 16 17 height:480px; 18 19 } 20 21 然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。 22 23 div#small { 24 25 position: absolute; 26 27 top: 50%; 28 29 height: 240px; 30 31 margin-top: -120px; 32 33 }
2.3D按钮
要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。 div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; }
3.用图片充当列表标志
默认情况下，浏览器使用一个黑圆圈作为列表标志，可以用图片取代它： ul {list-style: none} ul li { background-image: url("path-to-your-image"); background-repeat: none; background-position: 0 0.5em; }
4.如何使用CSS生成一个三角形？
先编写一个空元素 <div class="triangle"></div> 然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果： .triangle { border-color: transparent transparent green transparent; border-style: solid; border- 0px 300px 300px 300px; height: 0px; 0px; }
5.禁止自动换行
如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：
h1 { white-space:nowrap; }
6. 用图片替换文字
有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写： h1 { text-indent:-9999px; background:url("h1-image.jpg") no-repeat; 200px; height:50px; }
7.CSS提示框
当鼠标移动到链接上方，会自动出现一个提示框。 <a class="tooltip" href="#">链接文字 <span>提示文字</span></a> CSS这样写： a.tooltip {position: relative} a.tooltip span {display:none; padding:5px; 200px;} a:hover {background:#fff;} /*background-color is a must for IE6*/ a.tooltip:hover span{display:inline; position:absolute;}
8.取消IE文本框的滚动条
textarea { overflow: auto; }
9. 黑白图像
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
10. 页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果： body:before { content: ""; position: fixed; top: -10px; left: 0; 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}
11.优化显示文本
有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：
12.文本渐变
文本渐变效果很流行，使用 CSS3 能够很简单就实现： h2[data-text] { position: relative;} h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
13.禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
.disabled { pointer-events: none; }
14.Font-Size 基准
/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */ body {font-size:10/16;} /* 然后就可以用em做统一字体单位了 2.4em = 24px */ h1 {font-size: 2.4 em}