Web开发者不容错过的20段CSS代码（二）
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
img.polaroid {
background:#000;/*Change this to a background image or remove*/
border:solid#fff;
border-width:6px6px20px6px;
box-shadow:1px1px5px#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*/
}
源码地址： http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3
12. 锚链接伪类选择器
a:link {color:blue; }
a:visited {color:purple; }
a:hover {color:red; }
a:active {color: yellow; }
源码地址： http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。
.has-pullquote:before {
/* Reset metrics. */
padding:0;
border:none;
/* Content */
content:attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: rightright;
width:320px;
margin:12px-140px24px36px;
/* 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;
}
源码地址： http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
html {
background:url('images/bg.jpg')no-repeatcentercenterfixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
源码： http://css-tricks.com/perfect-full-page-background-image/
15. 内容垂直集中
相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
.container {
min-height:6.5em;
display:table-cell;
vertical-align:middle;
}
源码地址： http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
html {height:101%}
17. CSS3 Gradients模板
#colorbox {
background:#629721;
background-image: -webkit-gradient(linear,lefttop,leftbottombottom, 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);
}
18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。
@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;
}
源码地址： http://css-tricks.com/snippets/css/using-font-face/
19.创建缝合效果
p {
position:relative;
z-index:1;
padding:10px;
margin:10px;
font-size:21px;
line-height:1.3em;
color:#fff;
background:#ff0030;
-webkit-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);
-moz-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);
box-shadow:0004px#ff0030,2px1px6px4pxrgba(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;
bottombottom:3px;
left:3px;
rightright:3px;
border:2pxdashed#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;
}
源码地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
来自： HONGKIAT.COM
浙公网安备 33010602011771号