30个CSS代码片断

CSS是大家在web开发中常用的语言，但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。

幸运的是，网络上大家可以找到很多不错的CSS代码片断，能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。希望大家喜欢!

代码

1. Chris Poteet’s CSS浏览器重置代码

这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6，但是对于这种美国占有率低于1%的浏览器，大家大可以放弃。

1. /*
2. Reset Default Browser Styles
3. - Place first in the listing of external style sheets for cascading.
4. - Be sure to explicitly set margin/padding styles.
5. - Styles are not reset that have to do with display (block, inline) are not reset.
6. By: Chris Poteet & various influences
7. */
8. * {
9. vertical-align: baseline;
10. font-family: inherit;
11. font-style: inherit;
12. font-size: 100%;
13. border: none;
14. padding: 0;
15. margin: 0;
16. }
17. body {
18. padding: 5px;
19. }
20. h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
21. margin: 20px0;
22. }
23. li, dd, blockquote {
24. margin-left: 40px;
25. }
26. dt {
27. font-weight: bold;
28. }
29. table {
30. border-collapse: collapse;
31. border-spacing: 0;
32. }

2. Eric Meyer’s CSS Reset

Eric的CSS代码片断可能是最受欢迎的代码之一。甚至支持Blueprint CSS Framework.

1. /* http://meyerweb.com/eric/tools/css/reset/
2. v2.0 | 20110126
3. License: none (public domain)
4. */
5. html, body, div, span, applet, object, iframe,
6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7. a, abbr, acronym, address, big, cite, code,
8. del, dfn, em, img, ins, kbd, q, s, samp,
9. small, strike, strong, sub, sup, tt, var,
10. b, u, i, center,
11. dl, dt, dd, ol, ul, li,
12. fieldset, form, label, legend,
13. table, caption, tbody, tfoot, thead, tr, th, td,
14. article, aside, canvas, details, embed,
15. figure, figcaption, footer, header, hgroup,
16. menu, nav, output, ruby, section, summary,
17. time, mark, audio, video {
18. margin: 0;
19. padding: 0;
20. border: 0;
21. font-size: 100%;
22. font: inherit;
23. vertical-align: baseline;
24. }
25. /* HTML5 display-role reset for older browsers */
26. article, aside, details, figcaption, figure,
27. footer, header, hgroup, menu, nav, section {
28. display: block;
29. }
30. body {
31. line-height: 1;
32. }
33. ol, ul {
34. list-style: none;
35. }
36. blockquote, q {
37. quotes: none;
38. }
39. blockquote:before, blockquote:after,
40. q:before, q:after {
41. content: '';
42. content: none;
43. }
44. table {
45. border-collapse: collapse;
46. border-spacing: 0;
47. }

3. How to Create Multiple Borders in CSS3

非常酷的方式创建box阴影，允许你创建多个边框

1. box-shadow:
2. 0 00 2px#000,
3. 0 00 3px#999,
4. 0 00 9px#fa0,
5. 0 00 10px#666,
6. 0 00 16px#fd0,
7. 0 00 18px#000;

4. Tucked Corners

CSS代码允许你创建类似非常酷的Gravatar首页效果

1. div.tucked-corners {
2. background: #f6f6f6;
3. height: 380px;
4. margin: 50pxauto;
5. padding: 10px;
6. position: relative;
7. width: 580px;
8. -webkit-box-shadow: 0 1px7px hsla(0,0%,0%,.2);
9. -moz-box-shadow: 0 1px7px hsla(0,0%,0%,.2);
10. box-shadow: 0 1px7px hsla(0,0%,0%,.2);
11. }
12. span.tucked-corners {
13. background: #c4453c;
14. display: block;
15. height: 380px;
16. position: relative;
17. width: 580px;
18. -webkit-box-shadow: inset0 010px hsla(0,0%,0%,.25);
19. -moz-box-shadow: inset0 010px hsla(0,0%,0%,.25);
20. box-shadow: inset0 010px hsla(0,0%,0%,.25);
21. }
22. /* Top Corner Effect */
23. .top-corners:after,
24. .top-corners:before {
25. background: #e6e6e6;
26. content: '';
27. height: 50px;
28. position: absolute;
29. top: -25px;
30. width: 100px;
31. z-index: 10;
32. -webkit-box-shadow: 0 6px9px-8px hsla(0,0%,0%,.5);
33. -moz-box-shadow: 0 6px9px-8px hsla(0,0%,0%,.5);
34. box-shadow: 0 6px9px-8px hsla(0,0%,0%,.5);
35. }
36. .top-corners:after {
37. left: -50px;
38. -webkit-transform: rotate(-45deg);
39. -moz-transform: rotate(-45deg);
40. -ms-transform: rotate(-45deg);
41. -o-transform: rotate(-45deg);
42. transform: rotate(-45deg);
43. }
44. .top-corners:before {
45. right: -50px;
46. -webkit-transform: rotate(45deg);
47. -moz-transform: rotate(45deg);
48. -ms-transform: rotate(45deg);
49. -o-transform: rotate(45deg);
50. transform: rotate(45deg);
51. }
52. /* Bottom Corner Effect */
53. .bottom-corners:after,
54. .bottom-corners:before {
55. background: #e6e6e6;
56. content: '';
57. height: 50px;
58. position: absolute;
59. bottom: -25px;
60. width: 100px;
61. -webkit-box-shadow: 0 6px9px-8px hsla(0,0%,0%,.5);
62. -moz-box-shadow: 0 6px9px-8px hsla(0,0%,0%,.5);
63. box-shadow: 0 6px9px-8px hsla(0,0%,0%,.5);
64. }
65. .bottom-corners:after {
66. left: -50px;
67. -webkit-transform: rotate(-135deg);
68. -moz-transform: rotate(-135deg);
69. -ms-transform: rotate(-135deg);
70. -o-transform: rotate(-135deg);
71. transform: rotate(-135deg);
72. }
73. .bottom-corners:before {
74. right: -50px;
75. -webkit-transform: rotate(135deg);
76. -moz-transform: rotate(135deg);
77. -ms-transform: rotate(135deg);
78. -o-transform: rotate(135deg);
79. transform: rotate(135deg);
80. }

5. iPad-Specific CSS

修改一般的ipad屏幕布局

1. @media only screen and (device-width: 768px) {
2. /* For general iPad layouts */
3. }
4. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
5. /* For portrait layouts only */
6. }
7. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
8. /* For landscape layouts only */
9. }

6. Style links depending on file format

修改外部链接，email链接，pdf链接的样式

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

7. Drop Caps

非常棒的跨浏览器代码帮助你使得每段文字的第一个字母更加

1. .firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

明显CSS3也可以，但是不支持IE9

1. p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

8. CSS Sticky Footer

CSS实现的置顶sticky页脚效果，支持所有的主流浏览器包括chrome和IE8

CSS：

1. /*
2. Sticky Footer Solution
3. by Steve Hatcher
4. http://stever.ca
5. http://www.cssstickyfooter.com
6. */
7. * {margin:0;padding:0;}
8. /* must declare 0 margins on everything, also for main layout components use padding, not
9. vertical margins (top and bottom) to add spacing, else those margins get added to total height
10. and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
11. html, body {height: 100%;}
12. #wrap {min-height: 100%;}
13. #main {overflow:auto;
14. padding-bottom: 150px;} /* must be same height as the footer */
15. #footer {position: relative;
16. margin-top: -150px; /* negative value of footer height */
17. height: 150px;
18. clear:both;}
19. /*Opera Fix*/
20. body:before {/* thanks to Maleika (Kohoutec)*/
21. content:"";
22. height:100%;
23. float:left;
24. width:0;
25. margin-top:-32767px;/* thank you Erik J - negate effect of float*/
26. }
27. /* IMPORTANT
28. You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher.
29. <!--[if !IE 7]>
30. <style type="text/css">
31. #wrap {display:table;height:100%}
32. </style>
33. < ![endif]-->
34. */

HTML：

1. <divid="wrap">
2. <divid="main">
3. </div>
4. </div>
5. <divid="footer">
6. </div>

9. Image Replacement Technique

实用的图片替换文字页面元素效果。

1. a.replacement
2. {
3. background: url(dotted-border.png) no-repeat;
4. height: 44px;
5. width: 316px;
6. display: block;
7. text-indent: -9999px;
8. overflow: hidden; /*Add this line to the image replacement method*/
9. }

10. Set body font-size to 62.5% for Easier em Conversion

如果你想拥有更加灵活的布局，你应该使用em而不是pixel或者points。通过设置你的字体62.5%，你可以很容易的通过设置em为pixel的1/10来设置文字。

1. body {
2. font-size: 62.5%; /* font-size 1em = 10px */
3. }
4. p {
5. font-size: 1.2em; /* 1.2em = 12px */
6. }

11. Vertically Align Text

如果你设置line-height和父元素高度相同，则很容易让文字垂直居中

1. div { width:100px; height:100px; }
2. div p { line-height:100px; }

12. How to Create 3D Text With CSS3

使用text-shadow属性，你可以只使用CSS3创建3D文字

1. p.threeD
2. {
3. text-shadow:
4. -1px1px0#ddd,
5. -2px2px0#c8c8c8,
6. -3px3px0#ccc,
7. -4px4px0#b8b8b8,
8. -4px4px0#bbb,
9. 0px1px1px rgba(0,0,0,.4),
10. 0px2px2px rgba(0,0,0,.3),
11. -1px3px3px rgba(0,0,0,.2),
12. -1px5px5px rgba(0,0,0,.1),
13. -2px8px8px rgba(0,0,0,.1),
14. -2px13px13px rgba(0,0,0,.1)
15. ;
16. }

13. Wrapping Long URLs and Text Content with CSS

这段代码将会帮助你使得一行文字不至于太长，会自动根据内容宽度来折行

1. pre {
2. white-space: pre; /* CSS 2.0 */
3. white-space: pre-wrap; /* CSS 2.1 */
4. white-space: pre-line; /* CSS 3.0 */
5. white-space: -pre-wrap; /* Opera 4-6 */
6. white-space: -o-pre-wrap; /* Opera 7 */
7. white-space: -moz-pre-wrap; /* Mozilla */
8. white-space: -hp-pre-wrap; /* HP Printers */
9. word-wrap: break-word; /* IE 5+ */
10. }

14. Fancy Ampersand

使得你的"&"符号更加漂亮

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

15. Pull Quotes for Improved Reading

使得你的引用更加明显，将引用浮动到左边或者右边，并且包围内容

1. .pullquote {
2. width: 300px;
3. float: right;
4. margin: 5px;
5. font-family: Georgia, "Times New Roman", Times, serif;
6. font: italicbold#ff0000 ; }

16. Rounded Borders Around Images

使用CSS3可以很容易的生成图片圆角

1. img {
2. -webkit-border-radius: 25px;
3. -moz-border-radius: 25px;
4. border-radius: 25px;
5. }

17. Image Preloader

图片加载中先加载一个小图片，这样提示用户预加载图片

1. img
2. {
3. background: url(img/preloader.gif) no-repeat50%50%;
4. }

18. CSS3 Opacity

使用opacity属性，帮助你透明看到元素，你可以创建一个分层的纹理背景

1. div.L1 { background:#036; opacity:0.2; height:20px; }
2. div.L2 { background:#036; opacity:0.4; height:20px; }
3. div.L3 { background:#036; opacity:0.6; height:20px; }
4. div.L4 { background:#036; opacity:0.8; height:20px; }
5. div.L5 { background:#036; opacity:1.0; height:20px; }

19. Highlight links that open in a new window

这段代码允许你通过显示不同的样式清楚地分辨新窗口/标签页打开的link。

1. a[target="_blank"]:before,
2. a[target="new"]:before {
3. margin:0 5px0 0;
4. padding:1px;
5. outline:1pxsolid#333;
6. color:#333;
7. background:#ff9;
8. font:12px"Zapf Dingbats";
9. content: "\279C";
10. }

20. The New Bulletproof @Font-Face Syntax

跨浏览器的CSS代码片断，帮助你定义font face

1. @font-face {
2. font-family: 'MyFontFamily';
3. src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
4. url('myfont-webfont.woff') format('woff'),
5. url('myfont-webfont.ttf') format('truetype'),
6. url('myfont-webfont.svg#svgFontName') format('svg');
7. }

21. Flip an Image

翻转图片的CSS代码片断。特别适合你翻转图标

1. img {
2. -moz-transform: scaleX(-1);
3. -o-transform: scaleX(-1);
4. -webkit-transform: scaleX(-1);
5. transform: scaleX(-1);
6. filter: FlipH;
7. -ms-filter: "FlipH";
8. }

22. Email Link With An Image

快速的方法自动添加一个电子邮件图片到你的email链接

1. a[href^="mailto:"] {
2. background: url(images/email.png) no-repeatrighttop;
3. padding-right:10px;
4. }

23. Beautiful Blockquotes

美化你的引用

1. blockquote {
2. background:#f9f9f9;
3. border-left:10pxsolid#ccc;
4. margin:1.5em10px;
5. padding:.5em10px;
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. }

24. Browser CSS hacks

大量的CSS hack帮助你让你的网站在所有浏览器下显示一致

1. /***** Selector Hacks ******/
2. /* IE6 and below */
3. * html #uno { color: red }
4. /* IE7 */
5. *:first-child+html #dos { color: red }
6. /* IE7, FF, Saf, Opera */
7. html>body #tres { color: red }
8. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
9. html>/**/body #cuatro { color: red }
10. /* Opera 9.27 and below, safari 2 */
11. html:first-child #cinco { color: red }
12. /* Safari 2-3 */
13. html[xmlns*=""] body:last-child #seis { color: red }
14. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
15. body:nth-of-type(1) #siete { color: red }
16. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
17. body:first-of-type #ocho { color: red }
18. /* saf3+, chrome1+ */
19. @media screen and (-webkit-min-device-pixel-ratio:0) {
20. #diez { color: red }
21. }
22. /* iPhone / mobile webkit */
23. @media screen and (max-device-width: 480px) {
24. #veintiseis { color: red }
25. }
26. /* Safari 2 - 3.1 */
27. html[xmlns*=""]:root #trece { color: red }
28. /* Safari 2 - 3.1, Opera 9.25 */
29. *|html[xmlns*=""] #catorce { color: red }
30. /* Everything but IE6-8 */
31. :root *> #quince { color: red }
32. /* IE7 */
33. *+html #dieciocho { color: red }
34. /* Firefox only. 1+ */
35. #veinticuatro, x:-moz-any-link { color: red }
36. /* Firefox 3.0+ */
37. #veinticinco, x:-moz-any-link, x:default { color: red }
38. /* FF 3.5+ */
39. body:not(:-moz-handler-blocked) #cuarenta { color: red; }
40. /***** Attribute Hacks ******/
41. /* IE6 */
42. #once { _color: blue }
43. /* IE6, IE7 */
44. #doce { *color: blue; /* or #color: blue */ }
45. /* Everything but IE6 */
46. #diecisiete { color/**/: blue }
47. /* IE6, IE7, IE8 */
48. #diecinueve { color: blue\9; }
49. /* IE7, IE8 */
50. #veinte { color/*\**/: blue\9; }
51. /* IE6, IE7 -- acts as an !important */
52. #veintesiete { color: blue !ie; } /* string after ! can be anything */
53. /* IE8, IE9 */
54. #anotherone {color: blue\0/;} /* must go at the END of all rules */

25. How To Change The Default Text Selection Color on your Blog

修改高亮的文字颜色

1. ::selection {
2. background: #ffb7b7; /* Safari */
3. color: #ffffff;
4. }
5. ::-moz-selection {
6. background: #ffb7b7; /* Firefox */
7. color: #ffffff;
8. }

26. Clearfix

1. .clearfix:after {
2. visibility: hidden;
3. display: block;
4. font-size: 0;
5. content: " ";
6. clear: both;
7. height: 0;
8. }
9. .clearfix { display: inline-block; }
10. /* start commented backslash hack \*/
11. * html .clearfix { height: 1%; }
12. .clearfix { display: block; }
13. /* close commented backslash hack */

27. Hide Logo Text With Text Indent

使得你的logo SEO友好。保证logo文字不显示

1. h1 {
2. text-indent:-9999px;
3. margin:0auto;
4. width:400px;
5. height:100px;
6. background:transparenturl("images/logo.jpg") no-repeatscroll;
7. }

28. Reset all Text Colors and Background Colors

重置所有的背景和文字颜色。

1. * {
2. color: black!important;
3. background-color: white!important;
4. background-image: none!important;
5. }

29. Multiple Background Images

使用多背景图片

1. #multiple-images {
2. background: url(image_1.png) topleftno-repeat,
3. url(image_2.png) bottomleftno-repeat,
4. url(image_3.png) bottomrightno-repeat;
5. }

30. Linear Gradient

允许你为背景创建一个线状渐变效果，不支持一些老浏览器

1. background: -webkit-gradient(linear, lefttop, leftbottom, from(#74b8d7), to(#437fbc));
2. background: -moz-linear-gradient(top, #74b8d7, #437fbc);
3. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

转载于:https://www.cnblogs.com/kydcbt/archive/2012/02/07/css.html