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
;
}
|
这个类应该在span元素里使用，并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。
|
1
2
3
4
5
|
.amp {
font-family
: Baskerville,
'Goudy Old Style'
, Palatino,
'Book Antiqua'
,
serif
;
font-style
:
italic
;
font-weight
:
normal
;
}
|
2.段落首字符下沉
通常，这种效果会出现在印刷媒体上，如报纸或书籍。同样，如果网页布局合理，它也可以使用在Web页面上，它仅针对段落使用，但你也可以与单个元素绑定。
|
1
2
3
4
5
6
7
8
|
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
;
}
|
盒阴影（box shadow）属性几乎可以运用在任何元素上，它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。
|
1
2
3
4
5
|
#mydiv {
-moz-box-shadow:
inset
2px
0
4px
#000
;
-webkit-box-shadow:
inset
2px
0
4px
#000
;
box-shadow:
inset
2px
0
4px
#000
;
}
|
下面介绍一段外层阴影代码设计，注意，代码里的第三个参数表示模糊距离（blur distance），而第四个参数表示铺开的（spread）距离。关于这些值的设计，你可以前往 W3Schools学习。
|
1
2
3
4
5
|
#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
);
}
|
该符号只能在CSS3里生成，在主流浏览器中，这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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
;
}
|
6.居中对齐并设置固定宽度
|
1
2
3
4
|
#page-wrap {
width
:
800px
;
margin
:
0
auto
;
}
|
7.CSS3列文本
|
1
2
3
4
5
6
7
8
9
|
#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
;
}
|
8.固定页脚
在网页里添加固定的页脚其实非常简单，并且也很实用。有些网站的页脚设计得很漂亮，可以给网站呈现出一个完美的结尾。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#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不支持透明度，下面这段代码会很好地解决这一问题。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.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));
}
|
10.跨浏览器设置最小高度
有时开发者需要对HTML元素设置最小高度，然而，这个效果却无法兼容IE和老版本的Firefox，下面这段代码可以修复这个问题。
|
1
2
3
4
5
|
#container {
min-height
:
550px
;
height
:
auto
!important
;
height
:
550px
;
}
|
11. CSS3发光输入框
下面的这段代码重写了浏览器的默认行为，可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
input[type=text], textarea {
-webkit-transition:
all
0.30
s ease-in-out;
-moz-transition:
all
0.30
s ease-in-out;
-ms-transition:
all
0.30
s ease-in-out;
-o-transition:
all
0.30
s ease-in-out;
outline
:
none
;
padding
:
3px
0px
3px
3px
;
margin
:
5px
1px
3px
0px
;
border
:
1px
solid
#ddd
;
}
input[type=text]:focus, textarea:focus {
box-shadow:
0
0
5px
rgba(
81
,
203
,
238
,
1
);
padding
:
3px
0px
3px
3px
;
margin
:
5px
1px
3px
0px
;
border
:
1px
solid
rgba(
81
,
203
,
238
,
1
);
}
|
12.基于文件类型来创建链接样式
下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式，可能会用到各种协议（HTTP、FTP、IRC,mailto），或者是文件本身的类型（mp3、avi、pdf）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* external links */
padding-right
:
13px
;
background
:
url
(
'external.gif'
)
no-repeat
center
right
;
}
/* emails */
a[href^=
"mailto:"
] {
padding-right
:
20px
;
background
:
url
(
'email.png'
)
no-repeat
center
right
;
}
/* pdfs */
a[href$=
".pdf"
] {
padding-right
:
18px
;
background
:
url
(
'acrobat.png'
)
no-repeat
center
right
;
}
|
13.pre标签封装代码
pre标签常用来对代码进行布局，可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码，让内容直接显示在页面中。
|
1
2
3
4
5
6
7
|
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+ */
}
|
14.鼠标指向时变成手型
网页中有许多item在点击时，鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。
|
1
2
3
|
a[href], input[type=
'submit'
], input[type=
'image'
], label[for], select, button, .
pointer
{
cursor
:
pointer
;
}
|
15.页面顶部阴影
简单地把下面这段代码拷贝到页面里，它会在body元素之前产生黑色的，渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
body:before {
content
:
""
;
position
:
fixed
;
top
:
-10px
;
left
:
0
;
width
:
100%
;
height
:
10px
;
-webkit-box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,.
8
);
-moz-box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,.
8
);
box-shadow:
0px
0px
10px
rgba(
0
,
0
,
0
,.
8
);
z-index
:
100
;
}
|
16.气泡引用效果
这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。 这里（需翻墙）提供了许多关于语音泡泡的代码片段和使用技巧，欢迎去围观。
|
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
|
.chat-bubble {
background-color
:
#ededed
;
border
:
2px
solid
#666
;
font-size
:
35px
;
line-height
:
1.3em
;
margin
:
10px
auto
;
padding
:
10px
;
position
:
relative
;
text-align
:
center
;
width
:
300px
;
-moz-border-radius:
20px
;
-webkit-border-radius:
20px
;
-moz-box-shadow:
0
0
5px
#888
;
-webkit-box-shadow:
0
0
5px
#888
;
font-family
:
'Bangers'
,
arial
,
serif
;
}
.chat-bubble-arrow-border {
border-color
:
#666
transparent
transparent
transparent
;
border-style
:
solid
;
border-width
:
20px
;
height
:
0
;
width
:
0
;
position
:
absolute
;
bottom
:
-42px
;
left
:
30px
;
}
.chat-bubble-arrow {
border-color
:
#ededed
transparent
transparent
transparent
;
border-style
:
solid
;
border-width
:
20px
;
height
:
0
;
width
:
0
;
position
:
absolute
;
bottom
:
-39px
;
left
:
30px
;
}
|
17.指定标题样式
该模板提供了所有头元素的主要样式，从H1到H5。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
h
1
,h
2
,h
3
,h
4
,h
5
{
color
:
#005a9c
;
}
h
1
{
font-size
:
2.6em
;
line-height
:
2.45em
;
}
h
2
{
font-size
:
2.1em
;
line-height
:
1.9em
;
}
h
3
{
font-size
:
1.8em
;
line-height
:
1.65em
;
}
h
4
{
font-size
:
1.65em
;
line-height
:
1.4em
;
}
h
5
{
font-size
:
1.4em
;
line-height
:
1.25em
;
}
|
18.利用CSS生成纹理图案背景
通过CSS来为背景图片添加噪点，从而形成漂亮的纹理图案。你可以使用 NoiseTextureGenerator生成器自定义噪点的纹理图案。
|
1
2
3
4
|
body {
background-image
:
url
(data:image/png;base
64
,iVBORw
0
KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp
4
XiDAAAAUVBMVEWFhYWDg
4
N
3
d
3
dtbW
17
e
3
t
1
dXWBgYGHh
4
d
5
eXlzc
3
OLi
4
ubm
5
uVlZWPj
4
+NjY
19
fX
2
JiYl/f
39
ra
2
uRkZGZmZlpaWmXl
5
dvb
29
xcXGTk
5
NnZ
2
c
8
TV
1
mAAAAG
3
RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR
4
XpWWB
67
c
2
BUFb
3
g
557
T/hRo
9
/WUMZHlgr
4
Bg
8
Z
4
qQgQJlHI
4
A
8
SzFVrapvmTF
9
O
7
dmYRFZ
60
YiBhJRCgh
1
FYhiLAmdvX
0
CzTOpNE
77
ME
0
Zty/nWWzchDtiqrmQDeuv
3
powQ
5
ta
2
eN
0
FY
0
InkqDD
73
lT
9
c
9
lEzwUNqgFHs
9
VQce
3
TVClFCQrSTfOiYkVJQBmpbq
2
L
6
iZavPnAPcoU
0
dSw
0
SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA
7
QiYAxi+IlPdqo+hYHnUt
5
ZPfnsHJyNiDtnpJyayNBkF
6
cWoYGAMY
92
U
2
hXHF/C
1
M
8
uP/ZtYdiuj
26
UdAdQQSXQErwSOMzt/XWRWAz
5
GuSBIkwG
1
H
3
FabJ
2
OsUOUhGC
6
tK
4
EMtJO
0
ttC
6
IBD
3
kM
0
ve
0
tJwMdSfjZo+EEISaeTr
9
P
3
wYrGjXqyC
1
krcKdhMpxEnt
5
JetoulscpyzhXN
5
FRpuPHvbeQaKxFAEB
6
EN+cYN
6
xD
7
RYGpXpNndMmZgM
5
Dcs
3
YSNFDHUo
2
LGfZuukSWyUYirJAdYbF
3
MfqEKmjM+I
2
EfhA
94
iG
3
L
7
uKrR+GdWD
73
ydlIB+
6
hgref
1
QTlmgmbM
3
/LeX
5
GI
1
Ux
1
RWpgxpLuZ
2
+I+IjzZ
8
wqE
4
nilvQdkUdfhzI
5
QDWy+kw
5
Wgg
2
pGpeEVeCCA
7
b
85
BO
3
F
9
DzxB
3
cdqvBzWcmzbyMiqhzuYqtHRVG
2
y
4
x+KOlnyqla
8
AoWWpuBoYRxzXrfKuILl
6
SfiWCbjxoZJUaCBj
1
CjH
7
GIaDbc
9
kqBY
3
W/Rgjda
1
iqQcOJu
2
WW+
76
pZC
9
QG
7
M
00
dffe
9
hNnseupFL
53
r
8
F
7
YHSwJWUKP
2
q+k
7
RdsxyOB
11
n
0
xtOvnW
4
irMMFNV
4
H
0
uqwS
5
ExsmP
9
AxbDTc
9
JwgneAT
5
vTiUSm
1
E
7
BSflSt
3
bfa
1
tv
8
Di
3
R
8
n
3
Af
7
MNWzs
49
hmauE
2
wP+ttrq+AsWpFG
2
awvsuOqbipWHgtuvuaAE+A
1
Z/
7
gC
9
hesnr+
7
wqCwG
8
c
5
yAg
3
AL
1
fm
8
T
9
AZtp/bbJGwl
1
pNrE
7
RuOX
7
PeMRUERVaPpEs+yqeoSmuOlokqw
49
pgomjLeh
7
icHNlG
19
yjs
6
XXOMedYm
5
xH
2
YxpV
2
tc
0
Ro
2
jJfxC
50
ApuxGob
7
lMsxfTbeUv
07
TyYxpeLucEH
1
gNd
4
IKH
2
LAg
5
TdVhlCafZvpskfncCfx
8
pOhJzd
76
bJWeYFnFciwcYfubRc
12
Ip/ppIhA
1
/mSZ/RxjFDrJC
5
xifFjJpY
2
Xl
5
zXdguFqYyTR
1
zSp
1
Y
9
p+tktDYYSNflcxI
0
iyO
4
TPBdlRcpeqjK/piF
5
bklq
77
VSEaA+z
8
qmJTFzIWiitbnzR
794
USKBUaT
0
NTEsVjZqLaFVqJoPN
9
ODG
70
IPbfBHKK+/q/AWR
0
tJzYHRULOa
4
MP+W/HfGadZUbfw
177
G
7
j/OGbIs
8
TahLyynl
4
X
4
RinF
793
Oz+BU
0
saXtUHrVBFT/DnA
3
ctNPoGbs
4
hRIjTok
8
i+algT
1
lTHi
4
SxFvONKNrgQFAq
2
/gFnWMXgwffgYMJpiKYkmW
3
tTg
3
ZQ
9
Jq+f
8
XN+A
5
eeUKHWvJWJ
2
sgJ
1
Sop+wwhqFVijqWaJhwtD
8
MNlSBeWNNWTa
5
Z
5
kPZw
5
+LbVT
99
wqTdx
29
lMUH
4
OIG/D
86
ruKEauBjvH
5
xy
6
um/Sfj
7
ei
6
UUVk
4
AIl
3
MyD
4
MSSTOFgSwsH/QJWaQ
5
as
7
ZcmgBZkzjjU
1
UrQ
74
ci
1
gWBCSGHtuV
1
H
2
mhSnO
3
Wp/
3
fEV
5
a+
4
wz//
6
qy
8
JxjZsmxxy
5
+
4
w
9
CDNJY
09
T
072
iKG
0
EnOS
0
arEYgXqYnXcYHwjTtUNAcMelOd
4
xpkoqiTYICWFq
0
JSiPfPDQdnt+
4
/wuqcXY
47
QILbgAAAABJRU
5
ErkJggg==);
background-color
:
#0094d0
;
}
|
你可能会遇到这种列表情况，需要把这个列表拆分成两个UL元素，你不妨看看下面这段代码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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
;
}
|
20.为文本添加悬停提示框
把这段代码拷贝到样式表中，使用新的HTML5数据属性，通过使用data-tooltip你就可以给文本添加悬停提示框了。
|
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
a {
border-bottom
:
1px
solid
#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
:
8px
solid
#222
;
border-top
:
8px
solid
hsla(
0
,
0%
,
0%
,.
85
);
border-left
:
8px
solid
transparent
;
border-right
:
8px
solid
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
:
0
15px
;
position
:
absolute
;
text-shadow
:
0
1px
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
;
}
|
21.创建暗灰色的按钮样式
下面这段代码创建了CSS3按钮类，并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。
|
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
|
.graybtn {
-moz-box-shadow:
inset
0px
1px
0px
0px
#ffffff
;
-webkit-box-shadow:
inset
0px
1px
0px
0px
#ffffff
;
box-shadow:
inset
0px
1px
0px
0px
#ffffff
;
background
:-webkit-gradient( linear,
left
top
,
left
bottom
, color-stop(
0.05
,
#ffffff
), color-stop(
1
,
#d1d1d1
) );
background
:-moz-linear-gradient(
center
top
,
#ffffff
5%
,
#d1d1d1
100%
);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#ffffff'
, endColorstr=
'#d1d1d1'
);
background-color
:
#ffffff
;
-moz-border-radius:
6px
;
-webkit-border-radius:
6px
;
border-radius:
6px
;
border
:
1px
solid
#dcdcdc
;
display
:inline-
block
;
color
:
#777777
;
font-family
:
arial
;
font-size
:
15px
;
font-weight
:
bold
;
padding
:
6px
24px
;
text-decoration
:
none
;
text-shadow
:
1px
1px
0px
#ffffff
;
}
.graybtn:hover {
background
:-webkit-gradient( linear,
left
top
,
left
bottom
, color-stop(
0.05
,
#d1d1d1
), color-stop(
1
,
#ffffff
) );
background
:-moz-linear-gradient(
center
top
,
#d1d1d1
5%
,
#ffffff
100%
);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#d1d1d1'
, endColorstr=
'#ffffff'
);
background-color
:
#d1d1d1
;
}
.graybtn:active {
position
:
relative
;
top
:
1px
;
}
|
22.打印的页面上显示URL
这条规则会使打印出来的页面在超链接文字后面加上URL，URL会被放在一组括号里面,前后各留一个空格。
|
1
2
3
4
5
|
@media
print
{
a:after {
content
:
" ["
attr
(href)
"] "
;
}
}
|
23.屏蔽Webkit移动浏览器中元素高亮效果
在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，而下面这段代码即可屏蔽这种样式。
|
1
2
3
4
5
6
7
8
|
body {
-webkit-touch-callout:
none
;
-webkit-user-select:
none
;
-khtml-user-select:
none
;
-moz-user-select:
none
;
-ms-user-select:
none
;
user-select:
none
;
}
|
通过下面的代码，可以让你的网站背景上产生一些小圆点装饰图案。默认情况下，它是使用在body元素上，但你也可以把它使用在网页里的其他容器上。
|
1
2
3
4
5
|
body {
background
: radial-gradient(
circle
,
white
10%
,
transparent
10%
),
radial-gradient(
circle
,
white
10%
,
black
10%
)
50px
50px
;
background-
size
:
100px
100px
;
}
|
25.CSS3棋盘格效果
和上面的小圆点设计一样，这个效果需要一些额外的语法才可以工作，它需要在支持CSS3的浏览器上运行，效果很艳丽。当然，你可以根据需要自定义颜色。
|
1
2
3
4
5
6
7
|
body {
background-color
:
white
;
background-image
: linear-gradient(
45
deg,
black
25%
,
transparent
25%
,
transparent
75%
,
black
75%
,
black
),
linear-gradient(
45
deg,
black
25%
,
transparent
25%
,
transparent
75%
,
black
75%
,
black
);
background-
size
:
100px
100px
;
background-position
:
0
0
,
50px
50px
;
}
|
26.Github Fork红丝带
下面这段代码是利用CSS3的transform属性生成Fork me on Github红丝带效果。
|
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
|
.ribbon {
background-color
:
#a00
;
overflow
:
hidden
;
/* top left corner */
position
:
absolute
;
left
:
-3em
;
top
:
2.5em
;
/* 45 deg ccw rotation */
-moz-transform: rotate(
-45
deg);
-webkit-transform: rotate(
-45
deg);
/* shadow */
-moz-box-shadow:
0
0
1em
#888
;
-webkit-box-shadow:
0
0
1em
#888
;
}
.ribbon a {
border
:
1px
solid
#faa
;
color
:
#fff
;
display
:
block
;
font
:
bold
81.25%
'Helvetiva Neue'
,
Helvetica
,
Arial
,
sans-serif
;
margin
:
0.05em
0
0.075em
0
;
padding
:
0.5em
3.5em
;
text-align
:
center
;
text-decoration
:
none
;
/* shadow */
text-shadow
:
0
0
0.5em
#444
;
}
|
27.字体压缩
在样式表里使用如下代码能够帮你节省许多网页空间。
|
1
2
3
|
p {
font
:
italic
small-caps
bold
1.2em
/
1.0em
Arial
,
Tahoma
,
Helvetica
;
}
|
28.纸页面卷曲效果
这种效果可以被广泛的使用在多种容器中，查看 demo page页面来更好地掌握该函数的使用吧。
|
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
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
:
1px
solid
#efefef
;
margin
:
0
30px
30px
0
;
background
:
#fff
;
-webkit-box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
-moz-box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
40px
rgba(
0
,
0
,
0
,
0.06
)
inset
;
box-shadow:
0
1px
4px
rgba(
0
,
0
,
0
,
0.27
),
0
0
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:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
-moz-box-shadow:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
box-shadow:
0
8px
16px
rgba(
0
,
0
,
0
,
0.3
);
-webkit-transform: skew(
-15
deg) rotate(
-6
deg);
-moz-transform: skew(
-15
deg) rotate(
-6
deg);
-ms-transform: skew(
-15
deg) rotate(
-6
deg);
-o-transform: skew(
-15
deg) rotate(
-6
deg);
transform: skew(
-15
deg) rotate(
-6
deg);
}
ul.box li:after {
left
:
auto
;
right
:
10px
;
-webkit-transform: skew(
15
deg) rotate(
6
deg);
-moz-transform: skew(
15
deg) rotate(
6
deg);
-ms-transform: skew(
15
deg) rotate(
6
deg);
-o-transform: skew(
15
deg) rotate(
6
deg);
transform: skew(
15
deg) rotate(
6
deg);
}
|
29.发光的锚链接
下面这段代码可以创建自定义的锚链接，鼠标悬浮在上面会发光。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
a {
color
:
#00e
;
}
a:visited {
color
:
#551a8b
;
}
a:hover {
color
:
#06e
;
}
a:focus {
outline
:
thin
dotted
;
}
a:hover, a:active {
outline
:
0
;
}
a, a:visited, a:active {
text-decoration
:
none
;
color
:
#fff
;
-webkit-transition:
all
.
3
s ease-in-out;
}
a:hover, .glow {
color
:
#ff0
;
text-shadow
:
0
0
10px
#ff0
;
}
|
30.创建CSS3 Banner
在支持CSS3的浏览器中，下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。
|
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
|
.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
:
15px
solid
#ffa200
;
border-right-color
:
transparent
;
line-height
:
0px
;
box-shadow:
-0px
5px
5px
-5px
#000
;
z-index
:
1
;
}
.featureBanner:after {
content
:
""
;
position
:
absolute
;
top
:
35px
;
left
:
-8px
;
border
:
4px
solid
#89540c
;
border-left-color
:
transparent
;
border-bottom-color
:
transparent
;
}
|
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
