常备CSS样式

根据文件格式显示不同的链接样式

/* external links */

 a[href^="http://"]{ 

padding-right: 20px; 

background: url(external.gif) no-repeatcenterright; 

 } 

/* emails */

 a[href^="mailto:"]{ 

padding-right: 20px; 

background: url(email.png) no-repeatcenterright; 

 } 

/* pdfs */

 a[href$=".pdf"]{ 

padding-right: 20px; 

background: url(pdf.png) no-repeatcenterright; 

 } 

在IE浏览器删除textarea的滚动条

textarea{ 

overflow:auto; 

 } 

浏览器特定的 hacks

/* IE 6 */

 * html .yourclass { } 

/* IE 7 */

 *+html .yourclass{ } 

/* IE 7 and modern browsers */

 html>body .yourclass { } 

/* Modern browsers (not IE 7) */

 html>/**/body .yourclass { } 

/* Opera 9.27 and below */

 html:first-child .yourclass { } 

/* Safari */

 html[xmlns*=""] body:last-child .yourclass { } 

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */

 body:nth-of-type(1) .yourclass { } 

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */

 body:first-of-type .yourclass {  } 

/* Safari 3+, Chrome 1+ */

 @media screen and (-webkit-min-device-pixel-ratio:0) { 

  .yourclass  {  } 

 } 

固定宽度且居中

1. .wrapper {
2. width:960px;
3. margin:0auto;
4. }

Rounded corners – border-radius

.round{ 

   -moz-border-radius: 10px; 

   -webkit-border-radius: 10px; 

   border-radius: 10px; /* future proofing */

   -khtml-border-radius: 10px; /* for old Konqueror browsers */

} 

伪元素向文本的第一个字母添加特殊样式

p:first-letter{ 

display:block; 

margin:5px0 05px; 

float:left; 

color:#000; 

font-size:60px; 

font-family:Georgia; 

 } 

使用 @fontface

@font-face { 

font-family: 'MyFontFamily'; 

src: url('myfont-webfont.eot?') format('eot'), 

url('myfont-webfont.woff') format('woff'), 

url('myfont-webfont.ttf')  format('truetype'), 

url('myfont-webfont.svg#svgFontName') format('svg'); 

     } 

跨浏览器的inline-block

li { 

width: 200px; 

min-height: 250px; 

border: 1pxsolid#000; 

display: -moz-inline-stack; 

display: inline-block; 

vertical-align: top; 

margin: 5px; 

         zoom: 1; 

         *display: inline; 

_height: 250px; 

 } 

Fixed Footer

#footer { 

position:fixed; 

    left:0px; 

    bottom:0px; 

height:30px; 

width:100%; 

background:#999; 

 } 

/* IE 6 */

 * html #footer { 

position:absolute; 

    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 

 } 

更改内容区域的大小

#content { 

width: 100%; 

margin: 0; 

float: none; 

} 

CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体）

/* Smartphones (portrait and landscape) ----------- */

 @media only screen

 and (min-device-width : 320px) 

 and (max-device-width : 480px) { 

/* Styles */

 } 

/* Smartphones (landscape) ----------- */

 @media only screen

 and (min-width : 321px) { 

/* Styles */

 } 

/* Smartphones (portrait) ----------- */

 @media only screen

 and (max-width : 320px) { 

/* Styles */

 } 

/* iPads (portrait and landscape) ----------- */

 @media only screen

 and (min-device-width : 768px) 

 and (max-device-width : 1024px) { 

/* Styles */

 } 

/* iPads (landscape) ----------- */

 @media only screen

 and (min-device-width : 768px) 

 and (max-device-width : 1024px) 

 and (orientation : landscape) { 

/* Styles */

 } 

/* iPads (portrait) ----------- */

 @media only screen

 and (min-device-width : 768px) 

 and (max-device-width : 1024px) 

 and (orientation : portrait) { 

/* Styles */

 } 

/* Desktops and laptops ----------- */

 @media only screen

 and (min-width : 1224px) { 

/* Styles */

 } 

/* Large screens ----------- */

 @media only screen

 and (min-width : 1824px) { 

/* Styles */

 } 

/* iPhone 4 ----------- */

 @media 

 only screen and (-webkit-min-device-pixel-ratio : 1.5), 

 only screen and (min-device-pixel-ratio : 1.5) { 

/* Styles */

 } 

多背景图片

#multiple-images { 

background: url(image_1.png) topleftno-repeat, 

url(image_2.png) bottomleftno-repeat, 

url(image_3.png) bottomrightno-repeat; 

} 

多列

#columns-3 { 

text-align: justify; 

    -moz-column-count: 3; 

    -moz-column-gap: 12px; 

    -moz-column-rule: 1pxsolid#c4c8cc; 

    -webkit-column-count: 3; 

    -webkit-column-gap: 12px; 

    -webkit-column-rule: 1pxsolid#c4c8cc; 

 } 

在IE的最小高度

1. .box {
2. min-height:500px;
3. height:auto!important;
4. height:500px;
5. }

突出显示文本样式

::selection { 

color: #000000; 

background-color: #FF0000; 

 } 

 ::-moz-selection { 

color: #000000; 

background: #FF0000; 

 } 

Box Shadow

box-shadow: 0px3px3px rgba(0,0,0,0.2); 

-moz-box-shadow: 0px3px3px rgba(0,0,0,0.2); 

-webkit-box-shadow: 0px3px3px rgba(0,0,0,0.2); 

占位符文本样式

::-webkit-input-placeholder { color: #ccc; font-style:italic } 

:-moz-placeholder           { color: #ccc; font-style:italic } 

CSS3 3D文字效果

h1 { 

text-shadow: 0 1px0#ccc, 

0 2px0#c9c9c9, 

0 3px0#bbb, 

0 4px0#b9b9b9, 

0 5px0#aaa, 

0 6px1px rgba(0,0,0,.1), 

0 05px rgba(0,0,0,.1), 

0 1px3px rgba(0,0,0,.3), 

0 3px5px rgba(0,0,0,.2), 

0 5px10px rgba(0,0,0,.25), 

0 10px10px rgba(0,0,0,.2), 

0 20px20px rgba(0,0,0,.15); 

 } 

WebKit的边界半径修正

1. -webkit-background-clip: padding-box;

XBrowser的border-radius（CSS3PIE）

1. .roundbox {
2. -moz-border-radius:8px;
3. -webkit-border-radius:8px;
4. -khtml-border-radius:8px;
5. border-radius:8px;
6. behavior: url(/PIE.htc);
7. }

更好的兼容IE浏览器的

<!--[if IE]>

<scriptsrc=" http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

CSS3工具提示（这个很实用，看我网站的导航工具提示效果)

a { color: #900; text-decoration: none;  } 

 a:hover { color: red; position: relative; 

 } 

 a[title]:hover:after { content: attr(title); padding: 4px8px; 

color: #333; 

position: absolute; 

   left: 0; 

   top: 100%; 

white-space: nowrap; 

z-index: 20px; 

   -moz-border-radius: 5px; 

   -webkit-border-radius: 5px; 

   border-radius: 5px; 

   -moz-box-shadow: 0px0px4px#222; 

   -webkit-box-shadow: 0px0px4px#222; 

   box-shadow: 0px0px4px#222; 

background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 

background-image: -webkit-gradient(linear,lefttop,leftbottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 

 } 

CSS3背景大小

body { 

background: #000url( http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) centercenterfixedno-repeat; 

   -moz-background-size: cover; 

   background-size: cover; 

 } 

 @media only all and (max-width: 1024px) and (max-height: 768px) { 

   body {    

     -moz-background-size: 1024px768px; 

     background-size: 1024px768px; 

   } 

 } 

跨浏览器的CSS页面卷曲阴影

.page-curl { 

position: relative; 

background: #ffffff; 

background: -moz-linear-gradient(top, #ffffff0%, #e5e5e5 100%); 

background: -webkit-gradient(linear, lefttop, leftbottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); 

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); 

 -webkit-box-shadow: 0px0px3px rgba(0, 0, 0, 0.3); 

 -moz-box-shadow: 0px0px3px rgba(0, 0, 0, 0.3); } 

 .page-curl:after { 

z-index: -1; 

position: absolute; 

background: transparent; 

width: 70%; 

height: 55%; 

content: ''; 

 right: 10px; 

 bottom: 10px; 

 -webkit-transform: skew(15deg) rotate(5deg); 

 -webkit-box-shadow: 8px12px10px rgba(0, 0, 0, 0.3); 

 -moz-transform: skew(15deg) rotate(5deg); 

 -moz-box-shadow: 8px12px10px rgba(0, 0, 0, 0.3); } 

 .page-curl:before { 

z-index: -2; 

position: absolute; 

background: transparent; 

width: 70%; 

height: 55%; 

content: ''; 

 left: 10px; 

 bottom: 10px; 

 -webkit-transform: skew(-15deg) rotate(-5deg); 

 -webkit-box-shadow: -8px12px10px rgba(0, 0, 0, 0.3); 

 -moz-transform: skew(-15deg) rotate(-5deg); 

 -moz-box-shadow: -8px12px10px rgba(0, 0, 0, 0.3); } 

CSS3模糊文字

.blur { 

color: transparent; 

text-shadow: 0 05px rgba(0,0,0,0.5); 

} 

修复 IE6/7 margin/padding双倍 间距错误

ul li 

 { 

float: right; 

margin-right: 10px; 

   *display: inline; /*Target IE7 and bellow*/

_display: inline; /*Target IE6 and bellow*/

 } 

/* This example fixes the double right margin bug */

链接伪类的顺序

a:link {color: blue;} 

a:visited {color: purple;} 

a:hover {color: red;} 

a:active {color: yellow;} 

响应布局的HTML Meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<meta name="HandheldFriendly" content="true">

这里就不说这个新版本和经典版本之间的主要差差异了. 它们两个都可以有效的清除你的浮动元素, 而且都支持流行的浏览器甚至是Internet Explorer 6-8.

4. 跨浏览器的透明度

1. .transparent {  
2.     filter: alpha(opacity=50); /* internet explorer */ 
3.     -khtml-opacity: 0.5;      /* khtml, old safari */ 
4.     -moz-opacity: 0.5;       /* mozilla, netscape */ 
5.     opacity: 0.5;           /* fx, safari, opera */ 
6. } 

Code Source

一些新的CSS3属性我们可能认为它适用于任何地方. 实际上不行,我们还得稍微调整下,透明度就是个例子. 加上这个filter属性来保证它能在IE游览器里正常运行.

5. CSS 块引用模版

1. blockquote {  
2.     background: #f9f9f9;  
3.     border-left: 10px solid #ccc;  
4.     margin: 1.5em 10px;  
5.     padding: .5em 10px;  
6.     quotes: "\201C""\201D""\2018""\2019";  
7. }  
8. blockquote:before {  
9.     color: #ccc;  
10.     content: open-quote;  
11.     font-size: 4em;  
12.     line-height: .1em;  
13.     margin-right: .25em;  
14.     vertical-align: -.4em;  
15. }  
16. blockquote p {  
17.     display: inline;  
18. } 

Code Source

不是所有的人都必须在他们的网站上使用blockquotes. 但是我认为这是一个很好的元素用于分离引用或是优化博客和网页上的重复内容. 上面的代码为你的blockquotes提供一个默认样式,这样你的内容就不会看起来单调乏味.

6. 个性的圆角

1. #container {  
2.     -webkit-border-radius: 4px 3px 6px 10px;  
3.     -moz-border-radius: 4px 3px 6px 10px;  
4.     -o-border-radius: 4px 3px 6px 10px;  
5.     border-radius: 4px 3px 6px 10px;  
6. }  
7.  
8. /* alternative syntax broken into each line */ 
9. #container {  
10.     -webkit-border-top-left-radius: 4px;  
11.     -webkit-border-top-right-radius: 3px;  
12.     -webkit-border-bottom-right-radius: 6px;  
13.     -webkit-border-bottom-left-radius: 10px;  
14.       
15.     -moz-border-radius-topleft: 4px;  
16.     -moz-border-radius-topright: 3px;  
17.     -moz-border-radius-bottomright: 6px;  
18.     -moz-border-radius-bottomleft: 10px;  
19. } 

大多数开发者都熟悉CSS3的圆角属性. 但是你知道如何为每个角设定不同的值吗? 上面的代码帮你搞定这个问题! 上面的两个版本都为你实现了这个效果,仔细研究下吧.

7.一般媒体查询

1. /* Smartphones (portrait and landscape) ----------- */ 
2. @media only screen   
3. and (min-device-width : 320px) and (max-device-width : 480px) {  
4.   /* Styles */ 
5. }  
6.  
7. /* Smartphones (landscape) ----------- */ 
8. @media only screen and (min-width : 321px) {  
9.   /* Styles */ 
10. }  
11.  
12. /* Smartphones (portrait) ----------- */ 
13. @media only screen and (max-width : 320px) {  
14.   /* Styles */ 
15. }  
16.  
17. /* iPads (portrait and landscape) ----------- */ 
18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
19.   /* Styles */ 
20. }  
21.  
22. /* iPads (landscape) ----------- */ 
23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  
24.   /* Styles */ 
25. }  
26.  
27. /* iPads (portrait) ----------- */ 
28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {  
29.   /* Styles */ 
30. }  
31.  
32. /* Desktops and laptops ----------- */ 
33. @media only screen and (min-width : 1224px) {  
34.   /* Styles */ 
35. }  
36.  
37. /* Large screens ----------- */ 
38. @media only screen and (min-width : 1824px) {  
39.   /* Styles */ 
40. }  
41.  
42. /* iPhone 4 ----------- */ 
43. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {  
44.   /* Styles */ 
45. } 

Code Source

这是一个很棒的模版，你能在CSS-Tricks找到其它零碎的媒体查询。不管怎样我已经把他们的例子全拷下来了，那里面包括了成吨的实际的移动设备。这些代码甚至能针对视网膜屏设备，使用最小设备像素比例。

8. 现代字体栈

1. /* Times New Roman-based serif */ 
2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;  
3.  
4. /* A modern Georgia-based serif */ 
5. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;  
6.  
7. /*A more traditional Garamond-based serif */ 
8. font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;  
9.  
10. /*The Helvetica/Arial-based sans serif */ 
11. font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;  
12.  
13. /*The Verdana-based sans serif */ 
14. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;  
15.  
16. /*The Trebuchet-based sans serif */ 
17. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;  
18.  
19. /*The heavier "Impact" sans serif */ 
20. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;  
21.  
22. /*The monospace */ 
23. font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;  

Code Source

你很难为设计一个新的页面头脑风暴式的想出自己的CSS字体栈。我希望这一小片代码能减轻一些折磨，并给你一些可以着手开始的模版。如果你想找更多的例子，查看一下CSS 字体栈 ，这是我最喜欢的资源之一。

9. 自定义文本选择

1. ::selection { background: #e2eae2; }  
2. ::-moz-selection { background: #e2eae2; }  
3. ::-webkit-selection { background: #e2eae2; } 

一些新式的浏览器会允许你定义页面中的高亮颜色。默认这是设为淡蓝色的，但你可以设置任何投你所好的颜色值，这小片代码包括了典型的::selection目标以及专为Webkit和Mozilla的特定前缀。

10.隐藏H1文本为Logo标志

1. h1 {  
2.     text-indent: -9999px;  
3.     margin: 0 auto;  
4.     width: 320px;  
5.     height: 85px;  
6.     background: transparent url("images/logo.png") no-repeat scroll;  
7. } 

我第一次注意到这个技术实现是在古老的Digg 布局 。为了SEO的目的，你也可以设置一个包含有你的站点名称的H1标签。但使用CSS我们能移走这个文本使它不可见，并用一个客制化的logo图片替换它。

11. polaroid图像边界

1. img.polaroid {  
2.     background:#000; /*Change this to a background image or remove*/ 
3.     border:solid #fff;  
4.     border-width:6px 6px 20px 6px;  
5.     box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */ 
6.     -webkit-box-shadow:1px 1px 5px #333;  
7.     -moz-box-shadow:1px 1px 5px #333;  
8.     height:200px; /*Set to height of your image or desired div*/ 
9.     width:200px; /*Set to width of your image or desired div*/ 
10. } 

Code Source

应用这个基础的片段将使你能在你的图像上实现.polaroid 类。这将会创建老照片风格效果，带一个很宽的白边和一些淡淡的阴影。你要更新宽/高数值，以便和你的图片尺寸和网站布局相匹配。

13. 花式CSS3 Pull-引文

1. .has-pullquote:before {  
2.     /* Reset metrics. */ 
3.     padding: 0;  
4.     border: none;  
5.       
6.     /* Content */ 
7.     content: attr(data-pullquote);  
8.       
9.     /* Pull out to the right, modular scale based margins. */ 
10.     float: right;  
11.     width: 320px;  
12.     margin: 12px -140px 24px 36px;  
13.       
14.     /* Baseline correction */ 
15.     position: relative;  
16.     top: 5px;  
17.       
18.     /* Typography (30px line-height equals 25% incremental leading) */ 
19.     font-size: 23px;  
20.     line-height: 30px;  
21. }  
22.  
23. .pullquote-adelle:before {  
24.     font-family: "adelle-1", "adelle-2";  
25.     font-weight: 100;  
26.     top: 10px !important;  
27. }  
28.  
29. .pullquote-helvetica:before {  
30.     font-family: "Helvetica Neue", Arial, sans-serif;  
31.     font-weight: bold;  
32.     top: 7px !important;  
33. }  
34.  
35. .pullquote-facit:before {  
36.     font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;  
37.     font-weight: bold;  
38.     top: 7px !important;  
39. } 

Code Source

Pull-引文(Pull-quotes)与块引用(blockquotes)不同，它们出现在你的博客或者新闻文章的一边。这些引文经常从文章中引用文本，所以它们和块引用显示的稍许不一样。这些默认类具有一些基础的属性，带有3个可供选择的独特的字体类型。

14.全屏背景和CSS3

1. html {   
2.     background: url('images/bg.jpg') no-repeat center center fixed;   
3.     -webkit-background-size: cover;  
4.     -moz-background-size: cover;  
5.     -o-background-size: cover;  
6.     background-size: cover;  
7. } 

Code Source

我应该标注一下这个代码在不支持CSS3语法的老式浏览器中不会正确的工作。然而如果你是在寻找一个不需要关心遗留系统支持的快速的解决方案，这是你能找到的最好的代码段！给你网站背景增加很大的照片同时又能使它们能在你滚动的时候保持可变尺寸和固定不动。

15. 垂直居中内容

1. .container {  
2.     min-height: 6.5em;  
3.     display: table-cell;  
4.     vertical-align: middle;  
5. } 

Code Source

使用 margin: 0 auto 技术，很容易就能使内嵌的内容位于你页面的水平正中。然而对垂直的文本要困难的多，尤其是考虑到滚动条和其它的方式。但这个是无需JavaScript就能完美无瑕工作的纯CSS解决方案。

16.强制垂直滚动条

1. html { height: 101% } 

如果你的页面内容不能填满你的浏览器窗口整个高度，那么你不会焦灼于获取滚动条。但是改变大小将会强制它们出现，并给你的窗口宽度增加额外的10-15像素，推走你的页面内容。这个代码段将保证你的HTML元素总是比浏览器高一点点，强制滚动条一直停留在适当位置。

17. CSS3梯度模板

1. #colorbox {  
2.     background: #629721;  
3.     background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));  
4.     background-image: -webkit-linear-gradient(top, #83b842, #629721);  
5.     background-image: -moz-linear-gradient(top, #83b842, #629721);  
6.     background-image: -ms-linear-gradient(top, #83b842, #629721);  
7.     background-image: -o-linear-gradient(top, #83b842, #629721);  
8.     background-image: linear-gradient(top, #83b842, #629721);  
9. } 

CSS3梯度是新技术参数的另一个奇妙的部分。许多特定前缀难以记忆，所以这个代码片段将能为你每个项目节省一点时间。

18. @font-face模版

1. @font-face {  
2.     font-family: 'MyWebFont';  
3.     src: url('webfont.eot'); /* IE9 Compat Modes */ 
4.     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
5.     url('webfont.woff') format('woff'), /* Modern Browsers */ 
6.     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */ 
7.     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
8. }  
9.       
10. body {  
11.     font-family: 'MyWebFont', Arial, sans-serif;  
12. } 

Code Source

这是另一些不是很容易记的CSS3代码。使用@font-face你可以给你的网站嵌入自己的TTF/OTF/SVG/WOFF文件，生成自定义的字体类型。为你未来的项目，将这个模版作为一个基本的例子。

19. 完整定义CSS3元素

1. p {  
2.     position:relative;  
3.     z-index:1;  
4.     padding: 10px;  
5.     margin: 10px;  
6.     font-size: 21px;  
7.     line-height: 1.3em;  
8.     color: #fff;  
9.     background: #ff0030;  
10.     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  
11.     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);  
12.     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);  
13.     -webkit-border-radius: 3px;  
14.     -moz-border-radius: 3px;  
15.     border-radius: 3px;  
16. }  
17.  
18. p:before {  
19.     content: "";  
20.     position: absolute;  
21.     z-index: -1;  
22.     top: 3px;  
23.     bottom: 3px;  
24.     left :3px;  
25.     right: 3px;  
26.     border: 2px dashed #fff;  
27. }  
28.  
29. p a {  
30.     color: #fff;  
31.     text-decoration:none;  
32. }  
33.  
34. p a:hover, p a:focus, p a:active {  
35.     text-decoration:underline;  
36. } 

Code Source

20. CSS3 斑马条纹

1. tbody tr:nth-child(odd) {  
2.     background-color: #ccc;  
3. } 

Code Source

这个项目最好的应用是在数据列表上. 为40或50行的表来定义是很费劲的事情. 通过添加上面的CSS3条纹属性可以方便的为奇数行添上背景色.

21. 字符美化

1. .amp {  
2.     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;  
3.     font-style: italic;  
4.     font-weight: normal;  
5. } 

Code Source

这个css类用在页面内容中围绕文字的span元素. 它会将一些典型的serif 字体用斜体形式显示.测试下看看是不是你喜欢的风格吧.

22. 段落首字母

1. p:first-letter{  
2.     display: block;  
3.     margin: 5px 0 0 5px;  
4.     float: left;  
5.     color: #ff3366;  
6.     font-size: 5.4em;  
7.     font-family: Georgia, Times New Roman, serif;  
8. } 

在报纸和图片上你一定看到过它们的首字母的特殊效果. 对于有足够版面的网页或博客来说肯定会受其影响. 上面的CSS规则定义了所有的P标签,你也可以把它们定义为一个class或是ID.

23. CSS3盒子模型内部阴影

1. #mydiv {   
2.     -moz-box-shadow: inset 2px 0 4px #000;  
3.     -webkit-box-shadow: inset 2px 0 4px #000;  
4.     box-shadow: inset 2px 0 4px #000;  
5. } 

阴影为我们的网站提供了巨大的变化. 你几乎可以所有的元素定义这个属性, 看起来都非常不错. 上面的代码定义了内阴影,对设计来说很丑,但在一定的环境下还是很好的.

24. CSS3盒子模型外部阴影

1. #mydiv {   
2.     -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  
3.     -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  
4.     box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  
5. } 

与CSS3内阴影一样,我也提供一段外阴影的代码. 注意第三个数字表示模糊距离,第四个表示范围. 了解更多从W3Schools.

25. 三角形列表前缀

1. ul {  
2.     margin: 0.75em 0;  
3.     padding: 0 1em;  
4.     list-style: none;  
5. }  
6. li:before {   
7.     content: "";  
8.     border-color: transparent #111;  
9.     border-style: solid;  
10.     border-width: 0.35em 0 0.35em 0.45em;  
11.     display: block;  
12.     height: 0;  
13.     width: 0;  
14.     left: -1em;  
15.     top: 0.9em;  
16.     position: relative;  
17. } 

Code Source

不管你信不信,反正我是信了.在CSS3中三角形的列表前缀是可能的. 这个看起来太酷了,可惜的是不是所有的浏览器都支持.

26. 固定宽度的居中布局

1. #page-wrap {  
2.     width: 800px;  
3.     margin: 0 auto;  
4. } 

Code Source

我知道之前已经提到过怎样设置水平居中.在这里的代码是完美实现固定宽度的水平居中 .

27. CSS3 文本分列

1. #columns-3 {  
2.     text-align: justify;  
3.     -moz-column-count: 3;  
4.     -moz-column-gap: 12px;  
5.     -moz-column-rule: 1px solid #c4c8cc;  
6.     -webkit-column-count: 3;  
7.     -webkit-column-gap: 12px;  
8.     -webkit-column-rule: 1px solid #c4c8cc;  
9. } 

Code Source

CSS3分列在网站上看起来会非常不错, 现实的问题是我们如何把基于文本的内容分列显示. 通过上面的代码,为你的文本段落设置其中的列的数值,文本内容将会按你设定的值分成宽度相同的列.

28. CSS 固定的页脚

1. #footer {  
2.     position: fixed;  
3.     left: 0px;  
4.     bottom: 0px;  
5.     height: 30px;  
6.     width: 100%;  
7.     background: #444;  
8. }  
9.    
10. /* IE 6 */ 
11. * html #footer {  
12.     position: absolute;  
13.     top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');  
14. } 

Code Source

这个实际用起来比听起来要有用的多, 为你的网站添加一个固定页脚是很简单的. 这些页脚不管页面如何滚动都是固定的,你可以包含一些帮助信息或是联系方式等等. 完美的为用户界面增加价值.

29. PNG 图片在 IE6下的透明度

1. .bg {  
2.     width:200px;  
3.     height:100px;  
4.     background: url(/folder/yourimage.png) no-repeat;  
5.     _background:none;  
6.     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');  
7. }  
8.  
9.  
10. /* 1px gif method */ 
11. img, .png {  
12.     position: relative;  
13.     behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",  
14.        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",  
15.        this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),  
16.        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",  
17.        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));  
18. } 

Code Source

使用透明图片已经变成网站的最基本的实践. 开始的时候是gif图,现在都使用PNG透明图. 不幸的是一些IE老版的浏览器不支持这个透明度属性. 添加上上面的代码就能搞定这个问题.

30. 跨浏览器的最小高度

1. #container {  
2.     min-height: 550px;  
3.     height: auto !important;  
4.     height: 550px;  
5. } 

不得不使用min-height的开发者知道都是那些浏览器支持这个属性. 很多新的游览器都支持这个属性, 然而Internet Explorer 和 老版本的 Firefox对这个支持有问题. 上面的代码能解决这个Bug.

31. CSS3发光输入框

1. input[type=text], textarea {  
2.     -webkit-transition: all 0.30s ease-in-out;  
3.     -moz-transition: all 0.30s ease-in-out;  
4.     -ms-transition: all 0.30s ease-in-out;  
5.     -o-transition: all 0.30s ease-in-out;  
6.     outline: none;  
7.     padding: 3px 0px 3px 3px;  
8.     margin: 5px 1px 3px 0px;  
9.     border: 1px solid #ddd;  
10. }  
11.    
12. input[type=text]:focus, textarea:focus {  
13.     box-shadow: 0 0 5px rgba(81, 203, 238, 1);  
14.     padding: 3px 0px 3px 3px;  
15.     margin: 5px 1px 3px 0px;  
16.     border: 1px solid rgba(81, 203, 238, 1);  
17. } 

Code Source

我真的喜欢这个基础的自定义CSS3类，这是因为它覆盖默认浏览器行为的方式。我所知道的Chrome & Safar用户对表单里的输入框轮廓很反感。将这些属性加到你的样式表，会给基本的输入框元素设置一个全新的设计。

32. 基于文件类型的链接样式

1. /* external links */ 
2. a[href^="http://"] {  
3.     padding-right: 13px;  
4.     background: url('external.gif') no-repeat center right;  
5. }  
6.    
7. /* emails */ 
8. a[href^="mailto:"] {  
9.     padding-right: 20px;  
10.     background: url('email.png') no-repeat center right;  
11. }  
12.    
13. /* pdfs */ 
14. a[href$=".pdf"] {  
15.     padding-right: 18px;  
16.     background: url('acrobat.png') no-repeat center right;  
17. } 

Code Source

相当晦涩的一段CSS代码，但我喜欢它的创造力！你可以决定使用CSS选择器的链接的文件类型，并以图标作为背景图片。这些可以包含不同的协议（HTTP, FTP, IRC, mailto）或简单的只是它们自己的文件类型（mp3, avi, pdf）。

33. 强制代码包装

1. pre {  
2.     white-space: pre-wrap;       /* css-3 */ 
3.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */ 
4.     white-space: -pre-wrap;      /* Opera 4-6 */ 
5.     white-space: -o-pre-wrap;    /* Opera 7 */ 
6.     word-wrap: break-word;       /* Internet Explorer 5.5+ */ 
7. } 

Code Source

典型的pre标签是在布局中用来显示大块代码的。这是预编排的文本，就像你在Notepad或Textedit发现的那样，除非你经常看的是引起水平滚动条的一长段文字。这段CSS代码将强制所有pre标签为封装代码格式，不会跑到容器外面去。

34.强制可点击条目上显示手型光标

1. a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {  
2.     cursor: pointer;  
3. } 

Code Source

有许多默认的可点击HTML元素并不总是显示手型的指针图标。使用这个CSS选择器设置，你可以对许多关键的元素以及任何使用 .pointer类的其它对象，强制指定指针的形状。

35. 网页顶端阴影

1. body:before {  
2.     content: "";  
3.     position: fixed;  
4.     top: -10px;  
5.     left: 0;  
6.     width: 100%;  
7.     height: 10px;  
8.  
9.     -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
10.     -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
11.     box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
12.     z-index: 100;  
13. } 

Code Source

除了一些令人愉悦的美感，开发者可能找不到它会有多大用处。但我确实享受这个效果，而且显然它是独一无二的！只需将这个CSS 代码附加到你的body元素，就能从你的页面顶部往下显示一个渐渐消退的阴影。

36. CSS3 对话气泡

1. .chat-bubble {  
2.     background-color: #ededed;  
3.     border: 2px solid #666;  
4.     font-size: 35px;  
5.     line-height: 1.3em;  
6.     margin: 10px auto;  
7.     padding: 10px;  
8.     position: relative;  
9.     text-align: center;  
10.     width: 300px;  
11.     -moz-border-radius: 20px;  
12.     -webkit-border-radius: 20px;  
13.     -moz-box-shadow: 0 0 5px #888;  
14.     -webkit-box-shadow: 0 0 5px #888;  
15.     font-family: 'Bangers', arial, serif;   
16. }  
17. .chat-bubble-arrow-border {  
18.     border-color: #666 transparent transparent transparent;  
19.     border-style: solid;  
20.     border-width: 20px;  
21.     height: 0;  
22.     width: 0;  
23.     position: absolute;  
24.     bottom: -42px;  
25.     left: 30px;  
26. }  
27. .chat-bubble-arrow {  
28.     border-color: #ededed transparent transparent transparent;  
29.     border-style: solid;  
30.     border-width: 20px;  
31.     height: 0;  
32.     width: 0;  
33.     position: absolute;  
34.     bottom: -39px;  
35.     left: 30px;  
36. } 

Code Source

每当讨论到对话气泡时，无数的用户界面用途就会浮现出来。这些可以用于处理讨论评述，或者创建公告版，或者显示引用文本。只需将下面的类加入你的样式表，你也可以从这贴 CSS3代码片段  找到相关的HTML代码。

37. 默认的 H1-H5 题头

1. h1,h2,h3,h4,h5{  
2.     color: #005a9c;  
3. }  
4. h1{  
5.     font-size: 2.6em;  
6.     line-height: 2.45em;  
7. }  
8. h2{  
9.     font-size: 2.1em;  
10.     line-height: 1.9em;  
11. }  
12. h3{  
13.     font-size: 1.8em;  
14.     line-height: 1.65em;  
15. }  
16. h4{  
17.     font-size: 1.65em;  
18.     line-height: 1.4em;  
19. }  
20. h5{  
21.     font-size: 1.4em;  
22.     line-height: 1.25em;  
23. } 

Code Source

我已经提供了许多常见的语法，包括浏览器CSS重置以及一些HTML元素重置。这个模板包含了所有从H1-H5的主要的题头元素的默认样式。你也许会想增加H6，但我却从未见过有网站使用所有六个嵌套的题头。

38.纯CSS背景噪声

1. body {  
2.     background-image: url(data:image/png;base64,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);  
3.     background-color: #0094d0;  
4. } 

Code Source

设计师已经看到网站中加入这个效果有很长时间了，虽然他们通常是使用具有透明度的重复的瓷砖图像。但是我们可以给CSS嵌入Base64编码来生成全新的图像。在上面代码片段的例子中，是在body背景上产生了一个小小的噪声纹理，你也可以在噪声纹理发生器创建一个自定义的噪声背景。

39. 继续列表排序

1. ol.chapters {  
2.     list-style: none;  
3.     margin-left: 0;  
4. }  
5.  
6. ol.chapters > li:before {  
7.     content: counter(chapter) ". ";  
8.     counter-increment: chapter;  
9.     font-weight: bold;  
10.     float: left;  
11.     width: 40px;  
12. }  
13.  
14. ol.chapters li {  
15.     clear: left;  
16. }  
17.  
18. ol.start {  
19.     counter-reset: chapter;  
20. }  
21.  
22. ol.continue {  
23.     counter-reset: chapter 11;  
24. } 

Code Source

我觉得这也许不是特别流行的代码段，但它在开发者中确实具有市场。可能有一种情况，你需要继续一个列表项目，而它却被分割为两个独立的 UL元素。查看上面的代码来找寻一个很好的纯CSS修复方案。

40. CSS悬停工具提示

1. a {   
2.     border-bottom:1px solid #bbb;  
3.     color:#666;  
4.     display:inline-block;  
5.     position:relative;  
6.     text-decoration:none;  
7. }  
8. a:hover,  
9. a:focus {  
10.     color:#36c;  
11. }  
12. a:active {  
13.     top:1px;   
14. }  
15.    
16. /* Tooltip styling */ 
17. a[data-tooltip]:after {  
18.     border-top: 8px solid #222;  
19.     border-top: 8px solid hsla(0,0%,0%,.85);  
20.     border-left: 8px solid transparent;  
21.     border-right: 8px solid transparent;  
22.     content: "";  
23.     display: none;  
24.     height: 0;  
25.     width: 0;  
26.     left: 25%;  
27.     position: absolute;  
28. }  
29. a[data-tooltip]:before {  
30.     background: #222;  
31.     background: hsla(0,0%,0%,.85);  
32.     color: #f6f6f6;  
33.     content: attr(data-tooltip);  
34.     display: none;  
35.     font-family: sans-serif;  
36.     font-size: 14px;  
37.     height: 32px;  
38.     left: 0;  
39.     line-height: 32px;  
40.     padding: 0 15px;  
41.     position: absolute;  
42.     text-shadow: 0 1px 1px hsla(0,0%,0%,1);  
43.     white-space: nowrap;  
44.     -webkit-border-radius: 5px;  
45.     -moz-border-radius: 5px;  
46.     -o-border-radius: 5px;  
47.     border-radius: 5px;  
48. }  
49. a[data-tooltip]:hover:after {  
50.     display: block;  
51.     top: -9px;  
52. }  
53. a[data-tooltip]:hover:before {  
54.     display: block;  
55.     top: -41px;  
56. }  
57. a[data-tooltip]:active:after {  
58.     top: -10px;  
59. }  
60. a[data-tooltip]:active:before {  
61.     top: -42px;  
62. } 

Code Source

有许多开源的基于jQuery的工具提示，你可以在你的网站上实施。但基于CSS的工具提示非常罕见，这个是我非常喜欢的代码段之一。只要复制到你的样式表，并使用新的HTML5数据属性，你就能通过data-tooltip设置工具提示文本。

41. 暗灰色的圆形按钮

1. .graybtn {  
2.     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;  
3.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;  
4.     box-shadow:inset 0px 1px 0px 0px #ffffff;  
5.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );  
6.     background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );  
7.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');  
8.     background-color:#ffffff;  
9.     -moz-border-radius:6px;  
10.     -webkit-border-radius:6px;  
11.     border-radius:6px;  
12.     border:1px solid #dcdcdc;  
13.     display:inline-block;  
14.     color:#777777;  
15.     font-family:arial;  
16.     font-size:15px;  
17.     font-weight:bold;  
18.     padding:6px 24px;  
19.     text-decoration:none;  
20.     text-shadow:1px 1px 0px #ffffff;  
21. }  
22. .graybtn:hover {  
23.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );  
24.     background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );  
25.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');  
26.     background-color:#d1d1d1;  
27. }  
28. .graybtn:active {  
29.     position:relative;  
30.     top:1px;  
31. } 

Code Source

作为又一个对web开发者有帮助的模板，我列入了这个简单的CSS3按钮类。我使用了 .graybtn的类名，显示了相应的颜色，但这不是说你不能改变样式适应你自己的网站。在色轮中查验十六进制数值，以便从不同的颜色范围找到匹配的近似色调。

42.在一个打印页面显示URLS

1. @media print   {    
2.   a:after {    
3.     content: " [" attr(href) "] ";    
4.   }    
5. } 

Code Source

如果你运行一个新闻网站或者管理有许多打印素材的资源，这可能是你能找到的最好的代码段之一了。页面中的锚链接将看上去与普通样子显示一致。但当打印时，你的用户将会看到链接文本具有超链接的URL。这对需要访问你链接的网页，但在特定的打印文档中却看不到URL的人来说，非常方便。

43. 禁用移动Webkit高亮

1. body {  
2.     -webkit-touch-callout: none;  
3.     -webkit-user-select: none;  
4.     -khtml-user-select: none;  
5.     -moz-user-select: none;  
6.     -ms-user-select: none;  
7.     user-select: none;  
8. } 

根据你从事移动方面的经验，这段代码也许不是非常有用。但当用 Safari或其它基于Webkit引擎的浏览器访问移动网站时，你会注意到你一点击它们就会有一个围绕着元素的灰色盒子。只要增加这些样式到你的网站，就可以移除所有原生的移动浏览器的高亮效果。

44. CSS3 带圆点的图案

1. body {  
2.     background: radial-gradient(circle, white 10%, transparent 10%),  
3.     radial-gradient(circle, white 10%, black 10%) 50px 50px;  
4.     background-size: 100px 100px;  
5. } 

Code Source

最初在线发现这个代码段的时候，我有一点吃惊。但这真的是即兴创建纯CSS3的BG模式的有趣方法。我设置body元素为默认目标，但你可以将它引用到页面中的任何div容器。

45. CSS3 方格图案

1. body {  
2.     background-color: white;  
3.     background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),   
4.     linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);  
5.     background-size: 100px 100px;  
6.     background-position: 0 0, 50px 50px;  
7. } 

Code Source

与上面圆点花纹类似，我们也可以创建一个天衣无缝的方格图案。这个方法运行起来需要更多的一点语法，但在所有支持CSS3的浏览器中它看上去完美无缺。同样你也可以改变黑与白的颜色数值，以便匹配你自己网站的配色方案。

46. Github Fork 缎带

1. .ribbon {  
2.     background-color: #a00;  
3.     overflow: hidden;  
4.     /* top left corner */ 
5.     position: absolute;  
6.     left: -3em;  
7.     top: 2.5em;  
8.     /* 45 deg ccw rotation */ 
9.     -moz-transform: rotate(-45deg);  
10.     -webkit-transform: rotate(-45deg);  
11.     /* shadow */ 
12.     -moz-box-shadow: 0 0 1em #888;  
13.     -webkit-box-shadow: 0 0 1em #888;  
14. }  
15. .ribbon a {  
16.     border: 1px solid #faa;  
17.     color: #fff;  
18.     display: block;  
19.     font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;  
20.     margin: 0.05em 0 0.075em 0;  
21.     padding: 0.5em 3.5em;  
22.     text-align: center;  
23.     text-decoration: none;  
24.     /* shadow */ 
25.     text-shadow: 0 0 0.5em #444;  
26. } 

Code Source

作为一个 Github大用户，这段基础代码令我印象深刻。你可以使用CSS3的转换属性，快速的创建Github 角落缎带。对开源插件或Github上有众多追随的代码包来说这非常完美。如果你有一个活跃的Github套件库的话，对托管的HTML/CSS/JS演示来说也很棒。

47. 压缩的 CSS 字体属性

1. p {  
2.   font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;  
3. } 

Code Source

web开发者不经常使用这个压缩的字体属性的主要原因，在于不是所有设置都是需要的。但对这个速记方法有所理解可以使你在样式表上节省许多时间与空间。在你想要缩短你的字体样式格式的时候，使用这个代码片段。

48. 页面卷曲效果

1. ul.box {  
2.     position: relative;  
3.     z-index: 1; /* prevent shadows falling behind containers with backgrounds */ 
4.     overflow: hidden;  
5.     list-style: none;  
6.     margin: 0;  
7.     padding: 0;   
8. }  
9.  
10. ul.box li {  
11.     position: relative;  
12.     float: left;  
13.     width: 250px;  
14.     height: 150px;  
15.     padding: 0;  
16.     border: 1px solid #efefef;  
17.     margin: 0 30px 30px 0;  
18.     background: #fff;  
19.     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;  
20.     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;   
21.     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;   
22. }  
23.  
24. ul.box li:before,  
25. ul.box li:after {  
26.     content: '';  
27.     z-index: -1;  
28.     position: absolute;  
29.     left: 10px;  
30.     bottom: 10px;  
31.     width: 70%;  
32.     max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ 
33.     max-height: 100px;  
34.     height: 55%;  
35.     -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  
36.     -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  
37.     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  
38.     -webkit-transform: skew(-15deg) rotate(-6deg);  
39.     -moz-transform: skew(-15deg) rotate(-6deg);  
40.     -ms-transform: skew(-15deg) rotate(-6deg);  
41.     -o-transform: skew(-15deg) rotate(-6deg);  
42.     transform: skew(-15deg) rotate(-6deg);   
43. }  
44.  
45. ul.box li:after {  
46.     left: auto;  
47.     right: 10px;  
48.     -webkit-transform: skew(15deg) rotate(6deg);  
49.     -moz-transform: skew(15deg) rotate(6deg);  
50.     -ms-transform: skew(15deg) rotate(6deg);  
51.     -o-transform: skew(15deg) rotate(6deg);  
52.     transform: skew(15deg) rotate(6deg);   
53. } 

Code Source

这个页面卷曲效果几乎可以应用于任何包含网站内容的容器。我立即会想到图像媒体和引用文本，但这个才能真正做到任何对象。查看这段代码的在线演示页 ，以便对这些页面如何实现卷曲功能有更好的理解。

49.发光锚链接

1. a {  
2.     color: #00e;  
3. }  
4. a:visited {  
5.     color: #551a8b;  
6. }  
7. a:hover {  
8.     color: #06e;  
9. }  
10. a:focus {  
11.     outline: thin dotted;  
12. }  
13. a:hover, a:active {  
14.     outline: 0;  
15. }  
16. a, a:visited, a:active {  
17.     text-decoration: none;  
18.     color: #fff;  
19.     -webkit-transition: all .3s ease-in-out;  
20. }  
21. a:hover, .glow {  
22.     color: #ff0;  
23.     text-shadow: 0 0 10px #ff0;  
24. } 

源码

CSS3 的文本阴影提供了一个独特的网页排版制定方法。更确切的说，这个片段是非常好的制定富有创意的鼠标悬停发光特效的资源。虽然我并不认为这个特效可以毫无失调的融入大多数网站，但如果你有耐心调整它，你一定能够打动访问者。

50. 饶有特色的 CSS3 展示横条

1. .featureBanner {  
2.     position: relative;  
3.     margin: 20px 
4. }  
5. .featureBanner:before {  
6.     content: "Featured";  
7.     position: absolute;  
8.     top: 5px;  
9.     left: -8px;  
10.     padding-right: 10px;  
11.     color: #232323;  
12.     font-weight: bold;  
13.     height: 0px;  
14.     border: 15px solid #ffa200;  
15.     border-right-color: transparent;  
16.     line-height: 0px;  
17.     box-shadow: -0px 5px 5px -5px #000;  
18.     z-index: 1;  
19. }  
20.  
21. .featureBanner:after {  
22.     content: "";  
23.     position: absolute;  
24.     top: 35px;  
25.     left: -8px;  
26.     border: 4px solid #89540c;  
27.     border-left-color: transparent;  
28.     border-bottom-color: transparent;  
29. } 

display

inline; 内联元素，简单来说就是在同一行显示。

          inline元素的特点是：和其他元素都在一行上；

                     高，行高及顶和底边距不可改变；

                     宽度就是它的文字或图片的宽度，不可改变。

                     <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

          inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

                                让一个inline元素从新行开始；

                                    让块元素和其他元素保持在一行上；

                                                                控制inline元素的宽度（对导航条特别有用）；

                                                                控制inline元素的高度；

                                                                无须设定宽度即可为一个块元素设定与文字同宽的背景色

block; 块级元素，简单来说就是就是有换行，会换到第二行。

          block元素的特点是：总是在新行上开始；

                   高度，行高以及顶和底边距都可控制；

                   宽度缺省是它的容器的100%，除非设定一个宽度<div>,<p>, <h1>, <form>, <ul> 和<li>是块元素的例子。

inline-block; 就是在同一行内的块级元素。

                   inline-block的元素特点：

                                                      将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

                                                   并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline- block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联象。

IE下块元素如何实现display:inline-block的效果？

有两种方法：

1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline- block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

div {display:inline-block;...} 

div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。

代码如下：div {display:inline; zoom:1;...}