25个最常见却常常让人感到迷惑的CSS代码片段

因为自学的E文水平有限，一向不怎么敢去翻译老外的文章，大概意思自己是想到了，要用文字来表达却有些困难，总不能满意，怕不够准确，更怕误导读者。只有在能够保证别人可以看懂的情况之下，我才会偶尔译一些，而且只能是意译，比如本文，解释性的文字有些经过了删减或修改，代码部份是完整的。我不知道自己译得是否还能让读者看懂，但务必请“无意”读到的读者朋友给我留下一些意见。十分感谢了！

在这篇文章中，我们将会提及25个CSS代码应用技巧，这些技巧能够帮助我们完成许多常见但往往让人感到有些棘手的CSS开发任务。既然它们已经现成可用，并将为我们节省大量时间，为什么还要为编写而去做那些重复的工作？

这其中既包含了一些经典但已经过时的CSS技巧，也有许多CSS3代码应用的例子，比如box-shadow（图层阴影效果）, border-radius（圆角）, linear-gradient（线性渐变）等等。

1.给文本加上阴影效果，即突出显示指定的文本。

.text-shadow {
text-shadow: 2px　2px　4px　#666;
}

来源

2.以图片作为border(边框)背景

使用border-image，你可以给你网站中的任何对像创建任何类型的边框，只要准备好一张border.png 图片，然后为其加上必要的属性即可。

#border-image-style {
border-width:15px;
/* border-image针对特定的浏览器有3 个可选的值：repeat（重复） / round（平铺） / stretch（拉伸） */
-moz-border-image:url(border.png) 30 30 stretch ;
-webkit-border-image:url(border.png) 30 30 stretch;
}

来源

3.给边框和图片添加阴影效果 – box-shadow

box-shadow能够让你的图片及其边框看起来有如要从背景中“跃出”一样，它将前景和背景分离开来，很有3D立体感。

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

来源

4.圆角效果 – border-radius

这个是不言自明的了，就是让你的基于CSS3的网页元素呈现圆角，如边框或者按钮。圆角大小以像素为单位，可以调整，或增或减。第一部分代码让所有的角度都呈现为圆角；第二部分代码分别设定四个角度为圆形。

.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

来源

以下只将某个角设定为圆角：

#Bottom_Right {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Bottom_Left {
height: 65px;
width:160px;
-moz-border-radius-bottomleft: 50px;
border-bottom-left-radius: 50px;
}
#Top_Right {
height: 65px;
width:160px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
}
#Top_Left {
height: 65px;
width:160px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
}

来源

5.给对象加上渐显效果 – linear-gradient

有了CSS3，你无需使用图片就可以直接利用CSS给对象的背景加上渐显效果，只要改变背景颜色的16进制值即可。

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,? #74b8d7,? #437fbc);
filter:? progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

来源

6.插入打印分页符 – page-break

给文本加上一个打印用的分页符号，方便需要的读者打印他们喜欢的文本内容。越来越少人使用纸张来打印网页了，他们常常使用浏览器的数码技术打印网页，可以直接生成PDF文件格式，方便日后存档或阅读。

.page-break{
page-break-before:always;
}

来源

7.快速创建醒目的引文 – pull-quote

统一为引用的文本加上一种突出显示的格式，而不需要你每次都单独为它们设置样式，如：

.pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ;
}

来源

8.设置你的网页水平居中

.wrapper {
width:960px;
margin:auto;
}

来源

9.让容器中的内容垂直居中

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

来源

10.固定页脚footer – position:fixed

这会让你的网页页脚footer固定在浏览器的底部，将背景颜色改为自己所需。

#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* 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');
}

来源

11.使用一张图片来显示网页的加载效果

这对一些以图片为主要内容的网站很重要，让读者知道你的网页确实正在加载，让他们多点耐心。

你可以先到这里创建一张动态GIF图片: Ajaxload – Ajax loaing GIF generator.

img {
background: url(loader.gif) no?repeat 50% 50%;
}

来源

12.用一个logo替换网站的文本标题 – text-indent – text-indent

原理是将网站原来的文本标题隐藏起来，而只用一张LOGO图片来充当标题。这对SEO不会造成影响，因为原来主文本标题实际上还存在。

h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}

来源

13.设置首字符下沉

也就是将文本段落的第一个字符字体放大。

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}

来源

14.设置透明度 – opacity

.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}

这是一个例子:

<div class="box transparent">这里是内容</div>

来源

15.文件类型链接样式

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
content: url(icons/zip.png);
}

来源

16.自动调整背景图片的大小

#resize-image {
/* 假设图片image_1.png 原始大小为200x400px */
background:url(image_1.png) top left no-repeat;
-moz-background-size: 100px 200px;
-o-background-size: 100px 200px;
-webkit-background-size: 100px 200px;
}

来源

17.多栏显示网页内容

#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;
}

来源

18.CSS图片链接样式

用一张图片作为链接按钮，鼠标划过时图片会下沉。

a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}

来源

19.通过CSS的@font-face属性来实现在网页中嵌入任意字体

@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');}
/*其中fontName替换为你的字体名称*/

在页面中需要的地方使用该字体：

    p { font: 13px fontNameRegular, Arial, sans-serif; }    h1{font-family: fontNameRegular}

或者

     <p style="font-family: fontNameRegular">内容</p>

来源

20.引入Google fonts（谷歌字体）

利用Google font API，你无需自己另行安装字体。

在文件头部，也就是</head>之前添加引入字体的链接，如:

<!-- Some special fonts -->
/* Single font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans">
<!-- Some special fonts -->

然后在CSS样式中应用，如:

body {
font-family: 'Droid Serif', serif; font-size: 48px;
}

来源

21.图片翻转– transform

这可比你能想像的要有用得多。如果你已经有了一个按钮或箭头或其他功能图形，利用flip属性，你无需再另外手动裁剪和上传单独的图片了。请注意一下，以下用到的Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。scaleX表示图片向水平方向放大。

img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

来源

22.翻转图片或文本 – transform

使用CSS3的rotate属性，可以翻转任何图片,文本或其他元素。你可以更改rotate的属性值为指定的度数，单位为deg，负号表示反时针翻转。

/* for firefox, safari, chrome, and any other gecko/webkit browser */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

/* opera */
-o-transform: rotate(30deg);

来源

23.改变网页内容区域的大小

使用以下CSS代码可以改变内容区域的宽度大小。

#content {
width: 100%;
margin: 0;
float: none;
}

来源

24.针对不同浏览器的CSS hacks代码写法列表

以下是针对IE, Firefox, Chrome, Safari 和 Opera的CSS代码写法：

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno? { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera? */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {? color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez? { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece? { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho {? color: red }
/* Firefox only. 1+ */
#veinticuatro,? x:-moz-any-link? { color: red }
/* Firefox 3.0+ */
#veinticinco,? x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone? {color: blue\0/;} /* must go at the END of all rules */

来源

25.Eric Meyers CSS reset (CSS 重置)

CSS 重置所能做的就如它听起来的那样: CSS Reset是指重设浏览器的样式，这样可以使你的网站在各个不同样式浏览器之下呈现出统一的外观。

需要重设的属性如margins, font大小, 默认的line heights等等，以下的CSS reset出自Eric Meyer之手，已经成为众多同类CSS Reset中的标准，具有“CSS Reset 终极版”之称。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

来源
以下是重设所有颜色和改变link链接颜色重设文本及背景颜色，回到原来默认的黑色文本颜色。

* {
color: black !important;
background-color: white !important;
background-image: none !important;
}
a:link {
font-weight: bold;
text-decoration: underline;
color: #06c;
}

来源

代码来源：speckyboy