11.胶卷边框
img.polaroid { background:#000; /*Change this to a background image or remove*/ border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */ -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /*Set to height of your image or desired div*/ width:200px; /*Set to width of your image or desired div*/} 应用这个小片段能让你在的图像上使用.polaroid类。它会产生老式照片的效果。你会产生重新设置宽/高值以适应图片尺寸和网站布局的冲动。
12.锚链接伪类
a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: yellow; } 大多数的css开发人员知道锚链接样式和:hover效果。但是我想加入这条代码段作为新手的参考。这是锚链接和其他一些html元素默认的4种状态。在你能记住一些更多的复杂方法之前，尽管使用这种方便的用法。
13.奇妙的css3行内引用
.has-pullquote:before { /* Reset metrics. */ padding: 0; border: none; /* Content */ content: attr(data-pullquote); /* Pull out to the right, modular scale based margins. */ float: right; width: 320px; margin: 12px -140px 24px 36px; /* Baseline correction */ position: relative; top: 5px; /* Typography (30px line-height equals 25% incremental leading) */ font-size: 23px; line-height: 30px;} .pullquote-adelle:before { font-family: "adelle-1", "adelle-2"; font-weight: 100; top: 10px !important;} .pullquote-helvetica:before { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; top: 7px !important;} .pullquote-facit:before { font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif; font-weight: bold; top: 7px !important;} 出现在你的博客或者新文章中的行内引用和块引用是不同的。行内引用常在文章中引用文本，所以他们表现的和块引用有些许不同。这些引用有一些基本的属性：可选的3种独特的字体类型。
14.css3全屏背景
html { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} 这段代码在不支持css3语法的老式浏览器中无法正确的表达。当然如果你在寻找一个快捷的方案同时不必考虑老旧的系统支持，这段代码就是你所需要的！在你的网站添加一张大照片，它们可调整、在你滚动页面的时候也能固定不动，这一定很棒。
15.垂直居中
.container { min-height: 6.5em; display: table-cell; vertical-align: middle;} 使用margin：0 auto；
方法很容易使文本水平居中。然而垂直方向的文本会有点困难啊，尤其在页面含有滚动条和其他一些方法的时候。这是一段完美实现垂直居中纯css代码。
16.垂直滚动条
html { height: 101% } 当你的页面内容无法填满浏览器剩余的高度时，就不会有滚动条。当然，改变尺寸会使滚动条出现，同时会有10~15个像素填入到页面中，使窗口宽度增加。这段代码可以确保html元素总是比浏览器大一点点，从而使滚动条始终保持不动。
17.css3渐变模板
#colorbox { background: #629721; background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); background-image: -webkit-linear-gradient(top, #83b842, #629721); background-image: -moz-linear-gradient(top, #83b842, #629721); background-image: -ms-linear-gradient(top, #83b842, #629721); background-image: -o-linear-gradient(top, #83b842, #629721); background-image: linear-gradient(top, #83b842, #629721);} css3渐变是新规范中另一奇妙的部分。很多特定的前缀很难记忆，所以这段代码可以帮你在每项工程中节省时间。
18.@font-face（服务器端字体）模板
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */} body { font-family: 'MyWebFont', Arial, sans-serif;} 又是一段不怎么好记的css3代码。使用@fant-face可以在站点插入你自己的TTF/OTF/SVG/WOFF文件，生成自定义字体类型。以该模板为例子，你可以在以后的项目中使用。
19.封装css3元素
p { position:relative; z-index:1; padding: 10px; margin: 10px; font-size: 21px; line-height: 1.3em; color: #fff; background: #ff0030; -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} p:before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left :3px; right: 3px; border: 2px dashed #fff;} p a { color: #fff; text-decoration:none;} p a:hover, p a:focus, p a:active { text-decoration:underline;} 20.css3斑马纹
tbody tr:nth-child(odd) { background-color: #ccc;} 可能最好的包含斑马纹的方法就是使用数据表格。用户在浏览4、50行表格的时候很难确切的对准单元。通过添加斑马纹改变背景颜色的方法，我们就能找出奇数列了。