为了方便大家收藏与转载，现整理出50段，英文原版见：http://blog.csdn.net/love254443233/article/details/8995198
前20段：
共享已成为互联网的一种主流，尤其是分享一些非常实用的技术，本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。
Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
html, body, div, span, applet, object, iframe, h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, p, blockquote,
pre
, a, abbr, acronym, address, big, cite,
code
, del, dfn, em, img, ins, kbd, q, s, samp,
small
, strike, strong,
sub
, sup, tt, var, b, u, i,
center
, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption
, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed
, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
100%
;
font
: inherit;
vertical-align
:
baseline
;
outline
:
none
;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height
:
101%
; }
body {
font-size
:
62.5%
;
line-height
:
1
;
font-family
:
Arial
,
Tahoma
,
sans-serif
; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display
:
block
; }
ol, ul {
list-style
:
none
; }
blockquote, q {
quotes
:
none
; }
blockquote:before, blockquote:after, q:before, q:after {
content
:
''
;
content
:
none
; }
strong {
font-weight
:
bold
; }
table {
border-collapse
:
collapse
;
border-spacing
:
0
; }
img {
border
:
0
;
max-width
:
100%
; }
p {
font-size
:
1.2em
;
line-height
:
1.0em
;
color
:
#333
; }
|
2.经典的CSS Clearfix
这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。
|
1
2
3
4
5
|
.clearfix:after {
content
:
"."
;
display
:
block
;
clear
:
both
;
visibility
:
hidden
;
line-height
:
0
;
height
:
0
; }
.clearfix {
display
: inline-
block
; }
<font></font>
html[xmlns] .clearfix {
display
:
block
; }
* html .clearfix {
height
:
1%
; }
|
3.升级版的Clearfix
在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。
|
1
2
3
4
|
.clearfix:before, .container:after {
content
:
""
;
display
: table; }<font></font>
.clearfix:after {
clear
:
both
; }
/* IE 6/7 */
.clearfix { zoom:
1
; }
|
4. Cross-Browser Transparency
CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。
|
1
2
3
4
5
6
|
.
transparent
{
filter: alpha(opacity=
50
);
/* internet explorer */
-khtml-opacity:
0.5
;
/* khtml, old safari */
-moz-opacity:
0.5
;
/* mozilla, netscape */
opacity:
0.5
;
/* fx, safari, opera */
}
|
5. CSS Blockquote模板
这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
blockquote {
background
:
#f9f9f9
;<
border-left
:
10px
solid
#ccc
;
margin
:
1.5em
10px
;
padding
: .
5em
10px
;
quotes
:
"\201C"
"\201D"
"\2018"
"\2019"
;
}
blockquote:before {
color
:
#ccc
;
content
:
open-quote
;
font-size
:
4em
;
line-height
: .
1em
;
margin-right
: .
25em
;
vertical-align
: -.
4em
;
}
blockquote p {
display
:
inline
;
}
|
6. 个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#container {
-webkit-border-radius:
4px
3px
6px
10px
;
-moz-border-radius:
4px
3px
6px
10px
;
-o-border-radius:
4px
3px
6px
10px
;
border-radius:
4px
3px
6px
10px
;
}
/* alternative syntax broken into each line */
#container {
-webkit-border-top-left-radius:
4px
;
-webkit-border-top-rightright-radius:
3px
;
-webkit-border-bottom-rightright-radius:
6px
;
-webkit-border-bottom-left-radius:
10px
;
-moz-border-radius-topleft:
4px
;
-moz-border-radius-topright:
3px
;
-moz-border-radius-bottomright:
6px
;
-moz-border-radius-bottomleft:
10px
;
}
|
7. 一般媒体查询
这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
/* 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 */
}
<font></font>
/* 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 */
}
|
8. 现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* Times New Roman-based serif */
font-family
: Cambria,
"Hoefler Text"
, Utopia,
"Liberation Serif"
,
"Nimbus Roman No9 L Regular"
, Times,
"Times New Roman"
,
serif
;
/* A modern Georgia-based serif */
font-family
: Constantia,
"Lucida Bright"
, Lucidabright,
"Lucida Serif"
, Lucida,
"DejaVu Serif,"
"Bitstream Vera Serif"
,
"Liberation Serif"
, Georgia,
serif
;
/*A more traditional Garamond-based serif */
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
;
/*The Helvetica/Arial-based sans serif */
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
;
/*The Verdana-based sans serif */
font-family
: Corbel,
"Lucida Grande"
,
"Lucida Sans Unicode"
,
"Lucida Sans"
,
"DejaVu Sans"
,
"Bitstream Vera Sans"
,
"Liberation Sans"
,
Verdana
,
"Verdana Ref"
,
sans-serif
;
/*The Trebuchet-based sans serif */
font-family
:
"Segoe UI"
, Candara,
"Bitstream Vera Sans"
,
"DejaVu Sans"
,
"Bitstream Vera Sans"
,
"Trebuchet MS"
,
Verdana
,
"Verdana Ref"
,
sans-serif
;
/*The heavier “Impact” sans serif */
font-family
: Impact, Haettenschweiler,
"Franklin Gothic Bold"
, Charcoal,
"Helvetica Inserat"
,
"Bitstream Vera Sans Bold"
,
"Arial Black"
,
sans-serif
;
/*The monospace */
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
;
|
源码地址： http://www.sitepoint.com/eight-definitive-font-stacks/
9. 自定义文本选择
一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。
|
1
2
3
|
::selection {
background
:
#e2eae2
; }
::-moz-selection {
background
:
#e2eae2
; }
::-webkit-selection {
background
:
#e2eae2
; }
|
10.隐藏Logo上的H1文本
|
1
2
3
4
5
6
7
|
h
1
{
text-indent
:
-9999px
;
margin
:
0
auto
;
width
:
320px
;
height
:
85px
;
background
:
transparent
url
(
"images/logo.png"
)
no-repeat
scroll
;
}
|
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
|
1
2
3
4
5
6
7
8
9
10
|
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*/
}
|
12. 锚链接伪类选择器
|
1
2
3
4
|
a:link {
color
:
blue
; }
a:visited {
color
:
purple
; }
a:hover {
color
:
red
; }
a:active {
color
: yellow; }
|
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
.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
-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
;
}
|
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
|
1
2
3
4
5
6
7
|
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;
}
|
15. 内容垂直集中
相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
|
1
2
3
4
5
|
.container {
min-height
:
6.5em
;
display
:
table-cell
;
vertical-align
:
middle
;
}
|
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
|
1
|
html {
height
:
101%
}
|
17. CSS3 Gradients模板
|
1
2
3
4
5
6
7
8
9
|
#colorbox {
background
:
#629721
;
background-image
: -webkit-gradient(linear,
left
top
,
left
bottombottom, 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。
|
1
2
3
4
5
6
7
8
9
10
11
|
@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
;
}
|
19.创建缝合效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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
;
bottombottom:
3px
;
left
:
3px
;
rightright:
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 斑马线效果
当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。
|
1
2
3
|
tbody tr:nth-child(odd) {
background-color
:
#ccc
;
}
|
以上参考：http://www.admin10000.com/document/2090.html
后30段：
1.花式连字符（&）
这个类应该在span元素里使用，并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。
- .amp {
- font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
- font-style: italic;
- font-weight: normal;
- }
源码地址： http://css-tricks.com/snippets/css/fancy-ampersand/
2.段落首字符下沉
通常，这种效果会出现在印刷媒体上，如报纸或书籍。同样，如果网页布局合理，它也可以使用在Web页面上，它仅针对段落使用，但你也可以与单个元素绑定。
- p:first-letter{
- display: block;
- margin: 5px 0 0 5px;
- float: left;
- color: #ff3366;
- font-size: 5.4em;
- font-family: Georgia, Times New Roman, serif;
- }
3.内层CSS3盒阴影
盒阴影（box shadow）属性几乎可以运用在任何元素上，它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。
- #mydiv {
- -moz-box-shadow: inset 2px 0 4px #000;
- -webkit-box-shadow: inset 2px 0 4px #000;
- box-shadow: inset 2px 0 4px #000;
- }
4.外层CSS3盒阴影
下面介绍一段外层阴影代码设计，注意，代码里的第三个参数表示模糊距离（blur distance），而第四个参数表示铺开的（spread）距离。关于这些值的设计，你可以前往 W3Schools学习。
- #mydiv {
- -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
- }
5.三角形列表符号
该符号只能在CSS3里生成，在主流浏览器中，这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。
- ul {
- margin: 0.75em 0;
- padding: 0 1em;
- list-style: none;
- }
- li:before {
- content: "";
- border-color: transparent #111;
- border-style: solid;
- border-width: 0.35em 0 0.35em 0.45em;
- display: block;
- height: 0;
- width: 0;
- left: -1em;
- top: 0.9em;
- position: relative;
- }
源码地址： http://jsfiddle.net/chriscoyier/yNZTU/
6.居中对齐并设置固定宽度
- #page-wrap {
- width: 800px;
- margin: 0 auto;
- }
源码地址： http://css-tricks.com/snippets/css/centering-a-website/
7.CSS3列文本
- #columns-3 {
- text-align: justify;
- -moz-column-count: 3;
- -moz-column-gap: 12px;
- -moz-column-rule: 1px solid #c4c8cc;
- -webkit-column-count: 3;
- -webkit-column-gap: 12px;
- -webkit-column-rule: 1px solid #c4c8cc;
- }
源码地址： http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/
8.固定页脚
在网页里添加固定的页脚其实非常简单，并且也很实用。有些网站的页脚设计得很漂亮，可以给网站呈现出一个完美的结尾。
- #footer {
- position: fixed;
- left: 0px;
- bottom: 0px;
- height: 30px;
- width: 100%;
- background: #444;
- }
- /* 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');
- }
9.IE 6下修复PNG格式的透明度
在网站里使用透明的图像已成为一种很普遍的做法，其始于.gif图片格式，但现在也涉及到.png图片格式。而一些老版本的IE不支持透明度，下面这段代码会很好地解决这一问题。
- .bg {
- width:200px;
- height:100px;
- background: url(/folder/yourimage.png) no-repeat;
- _background:none;
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
- }
- /* 1px gif method */
- img, .png {
- position: relative;
- behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
- this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
- this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
- this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
- this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
- }
源码地址： http://css-tricks.com/snippets/css/png-hack-for-ie-6/
10.跨浏览器设置最小高度
有时开发者需要对HTML元素设置最小高度，然而，这个效果却无法兼容IE和老版本的Firefox，下面这段代码可以修复这个问题。
- #container {
- min-height: 550px;
- height: auto !important;
- height: 550px;
- }
11. CSS3发光输入框
下面的这段代码重写了浏览器的默认行为，可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。
- input[type=text], textarea {
- -webkit-transition:all0.30s ease-in-out;
- -moz-transition:all0.30s ease-in-out;
- -ms-transition:all0.30s ease-in-out;
- -o-transition:all0.30s ease-in-out;
- outline:none;
- padding:3px0px 3px 3px;
- margin:5px1px 3px 0px;
- border:1pxsolid #ddd;
- }
- input[type=text]:focus, textarea:focus {
- box-shadow:00 5px rgba(81,203,238,1);
- padding:3px0px 3px 3px;
- margin:5px1px 3px 0px;
- border:1pxsolid rgba(81,203,238,1);
- }
源码地址： http://css-tricks.com/snippets/css/glowing-blue-input-highlights/
12.基于文件类型来创建链接样式
下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式，可能会用到各种协议（HTTP、FTP、IRC,mailto），或者是文件本身的类型（mp3、avi、pdf）。
- /* external links */
- a[href^="http://"] {
- padding-right:13px;
- background:url('external.gif')no-repeatcenter right;
- }
- /* emails */
- a[href^="mailto:"] {
- padding-right:20px;
- background:url('email.png')no-repeatcenter right;
- }
- /* pdfs */
- a[href$=".pdf"] {
- padding-right:18px;
- background:url('acrobat.png')no-repeatcenter right;
- }
源码地址： http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/
13.pre标签封装代码
pre标签常用来对代码进行布局，可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码，让内容直接显示在页面中。
- pre{
- white-space: pre-wrap; /* css-3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word; /* Internet Explorer 5.5+ */
- }
源码地址： http://css-tricks.com/snippets/css/make-pre-text-wrap/
14.鼠标指向时变成手型
网页中有许多item在点击时，鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
- a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer{
- cursor:pointer;
- }
15.页面顶部阴影
简单地把下面这段代码拷贝到页面里，它会在body元素之前产生黑色的，渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。
- body:before {
- content:"";
- position:fixed;
- top:-10px;
- left:0;
- width:100%;
- height:10px;
- -webkit-box-shadow:0px0px 10px rgba(0,0,0,.8);
- -moz-box-shadow:0px0px 10px rgba(0,0,0,.8);
- box-shadow:0px0px 10px rgba(0,0,0,.8);
- z-index:100;
- }
源码地址： http://css-tricks.com/snippets/css/top-shadow/
16.气泡引用效果
这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里（需翻墙）提供了许多关于语音泡泡的代码片段和使用技巧，欢迎去围观。
- .chat-bubble {
- background-color:#ededed;
- border:2pxsolid #666;
- font-size:35px;
- line-height:1.3em;
- margin:10pxauto;
- padding:10px;
- position:relative;
- text-align:center;
- width:300px;
- -moz-border-radius:20px;
- -webkit-border-radius:20px;
- -moz-box-shadow:00 5px #888;
- -webkit-box-shadow:00 5px #888;
- font-family:'Bangers',arial,serif;
- }
- .chat-bubble-arrow-border {
- border-color:#666transparent transparent transparent;
- border-style:solid;
- border-width:20px;
- height:0;
- width:0;
- position:absolute;
- bottom:-42px;
- left:30px;
- }
- .chat-bubble-arrow {
- border-color:#edededtransparent transparent transparent;
- border-style:solid;
- border-width:20px;
- height:0;
- width:0;
- position:absolute;
- bottom:-39px;
- left:30px;
- }
源码地址（需翻墙）： http://html5snippets.com/snippets/35-css3-comic-bubble-using-triangle-trick
17.指定标题样式
该模板提供了所有头元素的主要样式，从H1到H5。
- h1,h2,h3,h4,h5{
- color:#005a9c;
- }
- h1{
- font-size:2.6em;
- line-height:2.45em;
- }
- h2{
- font-size:2.1em;
- line-height:1.9em;
- }
- h3{
- font-size:1.8em;
- line-height:1.65em;
- }
- h4{
- font-size:1.65em;
- line-height:1.4em;
- }
- h5{
- font-size:1.4em;
- line-height:1.25em;
- }
源码地址： https://snipt.net/freshmaker99/headers/
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点，从而形成漂亮的纹理图案。你可以使用 NoiseTextureGenerator生成器自定义噪点的纹理图案。
- body {
- background-image:url(data:image/png;base64,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);
- background-color:#0094d0;
- }
19.List Ordering
你可能会遇到这种列表情况，需要把这个列表拆分成两个UL元素，你不妨看看下面这段代码。
- ol.chapters {
- list-style:none;
- margin-left:0;
- }
- ol.chapters > li:before {
- content:counter(chapter)". ";
- counter-increment: chapter;
- font-weight:bold;
- float:left;
- width:40px;
- }
- ol.chapters li {
- clear:left;
- }
- ol.start {
- counter-reset: chapter;
- }
- ol.continue {
- counter-reset: chapter 11;
- }
源码地址： http://timmychristensen.com/css-ordered-list-numbering-examples.html
20.为文本添加悬停提示框
把这段代码拷贝到样式表中，使用新的HTML5数据属性，通过使用data-tooltip你就可以给文本添加悬停提示框了。
- a {
- border-bottom:1pxsolid #bbb;
- color:#666;
- display:inline-block;
- position:relative;
- text-decoration:none;
- }
- a:hover,
- a:focus {
- color:#36c;
- }
- a:active {
- top:1px;
- }
- /* Tooltip styling */
- a[data-tooltip]:after {
- border-top:8pxsolid #222;
- border-top:8pxsolid hsla(0,0%,0%,.85);
- border-left:8pxsolid transparent;
- border-right:8pxsolid transparent;
- content:"";
- display:none;
- height:0;
- width:0;
- left:25%;
- position:absolute;
- }
- a[data-tooltip]:before {
- background:#222;
- background: hsla(0,0%,0%,.85);
- color:#f6f6f6;
- content:attr(data-tooltip);
- display:none;
- font-family:sans-serif;
- font-size:14px;
- height:32px;
- left:0;
- line-height:32px;
- padding:015px;
- position:absolute;
- text-shadow:01px 1px hsla(0,0%,0%,1);
- white-space:nowrap;
- -webkit-border-radius:5px;
- -moz-border-radius:5px;
- -o-border-radius:5px;
- border-radius:5px;
- }
- a[data-tooltip]:hover:after {
- display:block;
- top:-9px;
- }
- a[data-tooltip]:hover:before {
- display:block;
- top:-41px;
- }
- a[data-tooltip]:active:after {
- top:-10px;
- }
- a[data-tooltip]:active:before {
- top:-42px;
- }
源码地址： http://www.impressivewebs.com/pure-css-tool-tips/
21.创建暗灰色的按钮样式
下面这段代码创建了CSS3按钮类，并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。
- .graybtn {
- -moz-box-shadow:inset0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset0px 1px 0px 0px #ffffff;
- box-shadow:inset0px 1px 0px 0px #ffffff;
- background:-webkit-gradient( linear, lefttop,leftbottom, color-stop(0.05,#ffffff), color-stop(1,#d1d1d1) );
- background:-moz-linear-gradient(centertop,#ffffff5%,#d1d1d1100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
- background-color:#ffffff;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1pxsolid #dcdcdc;
- display:inline-block;
- color:#777777;
- font-family:arial;
- font-size:15px;
- font-weight:bold;
- padding:6px24px;
- text-decoration:none;
- text-shadow:1px1px 0px #ffffff;
- }
- .graybtn:hover {
- background:-webkit-gradient( linear, lefttop,leftbottom, color-stop(0.05,#d1d1d1), color-stop(1,#ffffff) );
- background:-moz-linear-gradient(centertop,#d1d1d15%,#ffffff100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
- background-color:#d1d1d1;
- }
- .graybtn:active {
- position:relative;
- top:1px;
- }
22.打印的页面上显示URL
这条规则会使打印出来的页面在超链接文字后面加上URL，URL会被放在一组括号里面,前后各留一个空格。
- @mediaprint {
- a:after {
- content:" [" attr(href)"] ";
- }
- }
源码地址：http://www.smipple.net/snippet/bramloquet/Print%20the%20url%20after%20your%20links
23.屏蔽Webkit移动浏览器中元素高亮效果
在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，而下面这段代码即可屏蔽这种样式。
- body {
- -webkit-touch-callout:none;
- -webkit-user-select:none;
- -khtml-user-select:none;
- -moz-user-select:none;
- -ms-user-select:none;
- user-select:none;
- }
24.利用CSS生成小圆点图案
通过下面的代码，可以让你的网站背景上产生一些小圆点装饰图案。默认情况下，它是使用在body元素上，但你也可以把它使用在网页里的其他容器上。
- body {
- background: radial-gradient(circle,white10%,transparent10%),
- radial-gradient(circle,white10%,black10%)50px50px;
- background-size:100px100px;
- }
源码地址： http://dabblet.com/gist/1457668
25.CSS3棋盘格效果
和上面的小圆点设计一样，这个效果需要一些额外的语法才可以工作，它需要在支持CSS3的浏览器上运行，效果很艳丽。当然，你可以根据需要自定义颜色。
- body {
- background-color:white;
- background-image: linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black),
- linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black);
- background-size:100px100px;
- background-position:00,50px50px;
- }
26.Github Fork红丝带
下面这段代码是利用CSS3的transform属性生成Fork me on Github红丝带效果。
- .ribbon {
- background-color:#a00;
- overflow:hidden;
- /* top left corner */
- position:absolute;
- left:-3em;
- top:2.5em;
- /* 45 deg ccw rotation */
- -moz-transform: rotate(-45deg);
- -webkit-transform: rotate(-45deg);
- /* shadow */
- -moz-box-shadow:00 1em #888;
- -webkit-box-shadow:00 1em #888;
- }
- .ribbon a {
- border:1pxsolid #faa;
- color:#fff;
- display:block;
- font:bold81.25% 'Helvetiva Neue',Helvetica,Arial,sans-serif;
- margin:0.05em0 0.075em 0;
- padding:0.5em3.5em;
- text-align:center;
- text-decoration:none;
- /* shadow */
- text-shadow:00 0.5em #444;
- }
源码地址： http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/
27.字体压缩
在样式表里使用如下代码能够帮你节省许多网页空间。
- p {
- font:italicsmall-caps bold 1.2em/1.0emArial,Tahoma,Helvetica;
- }
源码地址： http://www.csspop.com/view/542
28.纸页面卷曲效果
这种效果可以被广泛的使用在多种容器中，查看 demo page页面来更好地掌握该函数的使用吧。
- ul.box {
- position:relative;
- z-index:1;/* prevent shadows falling behind containers with backgrounds */
- overflow:hidden;
- list-style:none;
- margin:0;
- padding:0;
- }
- ul.box li {
- position:relative;
- float:left;
- width:250px;
- height:150px;
- padding:0;
- border:1pxsolid #efefef;
- margin:030px 30px 0;
- background:#fff;
- -webkit-box-shadow:01px 4px rgba(0,0,0,0.27),00 40px rgba(0,0,0,0.06)inset;
- -moz-box-shadow:01px 4px rgba(0,0,0,0.27),00 40px rgba(0,0,0,0.06)inset;
- box-shadow:01px 4px rgba(0,0,0,0.27),00 40px rgba(0,0,0,0.06)inset;
- }
- ul.box li:before,
- ul.box li:after {
- content:'';
- z-index:-1;
- position:absolute;
- left:10px;
- bottom:10px;
- width:70%;
- max-width:300px;/* avoid rotation causing ugly appearance at large container widths */
- max-height:100px;
- height:55%;
- -webkit-box-shadow:08px 16px rgba(0,0,0,0.3);
- -moz-box-shadow:08px 16px rgba(0,0,0,0.3);
- box-shadow:08px 16px rgba(0,0,0,0.3);
- -webkit-transform: skew(-15deg) rotate(-6deg);
- -moz-transform: skew(-15deg) rotate(-6deg);
- -ms-transform: skew(-15deg) rotate(-6deg);
- -o-transform: skew(-15deg) rotate(-6deg);
- transform: skew(-15deg) rotate(-6deg);
- }
- ul.box li:after {
- left:auto;
- right:10px;
- -webkit-transform: skew(15deg) rotate(6deg);
- -moz-transform: skew(15deg) rotate(6deg);
- -ms-transform: skew(15deg) rotate(6deg);
- -o-transform: skew(15deg) rotate(6deg);
- transform: skew(15deg) rotate(6deg);
- }
源码地址： http://www.csspop.com/view/524
29.发光的锚链接
下面这段代码可以创建自定义的锚链接，鼠标悬浮在上面会发光。
- a {
- color:#00e;
- }
- a:visited {
- color:#551a8b;
- }
- a:hover {
- color:#06e;
- }
- a:focus {
- outline:thindotted;
- }
- a:hover, a:active {
- outline:0;
- }
- a, a:visited, a:active {
- text-decoration:none;
- color:#fff;
- -webkit-transition:all.3s ease-in-out;
- }
- a:hover, .glow {
- color:#ff0;
- text-shadow:00 10px #ff0;
- }
30.创建CSS3 Banner
在支持CSS3的浏览器中，下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。
- .featureBanner {
- position:relative;
- margin:20px
- }
- .featureBanner:before {
- content:"Featured";
- position:absolute;
- top:5px;
- left:-8px;
- padding-right:10px;
- color:#232323;
- font-weight:bold;
- height:0px;
- border:15pxsolid #ffa200;
- border-right-color:transparent;
- line-height:0px;
- box-shadow:-0px5px 5px -5px #000;
- z-index:1;
- }
- .featureBanner:after {
- content:"";
- position:absolute;
- top:35px;
- left:-8px;
- border:4pxsolid #89540c;
- border-left-color:transparent;
- border-bottom-color:transparent;
- }
源码地址： http://www.csspop.com/view/553
英文来源：css-snippets-for-designers
以上参考：http://www.admin10000.com/document/2123.html
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
