你在设计前台的时候是不是总是因为一些小的细节而抓狂，总是有那么几个像素的错位，莫名奇妙的不受控制，游览器间的不完美。你总是会最终发现原因，但是每次还是要被陷进去一段时间。下面是整理出的25个最最常见的代码片段，里面包括经典的布局，CSS3盒阴影等等。熟悉他们，来提高你的效率！

添加阴影文字- 文字阴影

Helps make your text stand out from the rest.

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

Source

添加基于图像的边界- 边界形象

You can create any kind of border you want for any object(s) on your website using this. Just supply your own border.png image, and the use the border-image property on a object to add that image-based border to it.

#border-image-style {
   border-width:15px;
   /* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
   -moz-border-image:url(border.png) 30 30 stretch ;
   -webkit-border-image:url(border.png) 30 30 stretch;
}

Source

添加边框和阴影的图像- 箱阴影

Helps make your borders and images “pop” from the background more, giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at.

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);

Source

添加圆角- 边界半径

Self-explanatory. Add rounded corners to your CSS3-based elements, like a border or button. You can change the radius to increase or decrease the rounding of the corners. This is a blanket rounding of each corner; the next code snippet lets you individually round each of the 4 corners.

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

Source

添加单个圆角- 边界半径

You can also choose which individual 4 corners are rounded or have a blanket rounding of every corner.

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

Source

添加一个渐变- 线性梯度

With CSS3, you no longer need a background image for gradients – you can use CSS to add a gradient to the background of something. Change the color hex values (“74b8d7″ and “437fbc”) to the color gradient you want.

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');

Source

添加分页打印

This adds nice page breaks to articles and other long-form content on your website when your visitor decides to print it. Yeah, less and less people are printing on paper, but they’re using their web browser’s print function to create digital copies (PDFs) for future reading or archiving. This snippet makes it easier for them to do so and read afterwards.

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

Source

快速创建 pull-quotes

A pull-quote is exactly what it sounds like: a differently-formatted quote from an article that stands out and is meant to highlight a key statement or other text. This makes it easy for you to create pull-quotes, rather than having to format the text each time you want to include a pull-quote. Change the font and font color by replacing Georgia, "Times New Roman", Times, seri and the ff0000 accordingly.

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

Source

创建网站剧中

In the days of high-resolution widescreen displays, it’s annoying to visit websites that are formatted like it’s 1999 ie. aligned all the way to the left. Make sure your website doesn’t suffer the same fate by forcing it to center horizontally.

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

Source

中心垂直某些内容

Say that three times fast. But seriously, this will vertically center content that’s in a container (like in a cell of a HTML table).

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

Source

给您的页脚的固定位置- 位置：固定

This makes your footer stick to the bottom of the screen. Change the background color to your needs.

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

Source

新增一个“载入图像”，好了，加载图片

Useful for those with high-resolution image-heavy websites, like portfolio or gallery sites. Instead of having visitors stare at a blank section of your page wondering if they need to refresh or something, you can have a animated GIF image of a “loading circle” giving visual confirmation that everything’s fine and the image is loading.
Animated GIF is not included, you could create your own here: Ajaxload – Ajax loaing GIF generator.

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

Source

更换标识标题文本- 文本缩进 - 文本缩进

This code is for when you need to hide the title text in the header of your website and replace it with your logo image instead – but still maintains the text of your website’s title for SEO (search engine optimization) purposes.

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

Source

添加下沉

A.k.a. how to make the first letter of your article bigger than the rest, all classic style.

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

Source

使用透明度- 不透明

You can make a box or any object on your website transparent with this, changing the opacity value to how transparent you want it to be ie. from really see-through to just barely see-through.

.transparent {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity:0.5;
   opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>

Source

文件格式相关链接样式

This snippet shows small icons next to a link that’s of a certain file format. The following has file format-dependent link styles for email, pdf, and zip file links. You can add more: just copy/paste one chunk and add your own extension (ex. “.mp3″).

/* 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);
}

Source

调整你的背景图片

Lets you do just what the title says. Simply change the size values and bam: resized background image.

#resize-image {
   /* Just imagine that the image_1.png is 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;
}

Source

有多个列

This lets you create multiple columns for your content without needing to go through the formatting hassle of creating separate paragraphs or whatnot. Change the number of columns to however many you want. Vertical grey separator lines are included, which you can change the color or remove altogether.

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

Source

基本环节展期为CSS Sprite

Save bandwidth and the hassle of creating a separate “hover” version of your button by using this sprite. It moves the background image of your button down when hovering over it, creating the hover effect.

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

a:hover {
       background-position: 0 -30px;
}

Source

Bulletproof @fontface

This is the Fontspring @font-face syntax:

@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');
	}

Source

谷歌添加字体

Use this to add the Google font API. This lets you use some new cool-looking fonts on your website that all browsers and computers will display properly – so you don’t have to mess with installing fonts separately for your website or hoping your visitors have the appropriate fonts (which no self-respecting designer would do anyway).

In the head:

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

In your CSS:

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

Source

翻转图像- 转变

More useful than you think. This is for when you have a button or arrow or other functional graphic that you don’t want or need to manually flip and upload an entirely separate image.

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

Source

旋转图像或文字- 转换

Rotate any image, text, or technically any element using this. Change the rotate value to how many degrees you want it to rotate, adding a “-” (like in the snippet) for counterclockwise rotating.

/* 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);

Source

改变你的内容区域的大小

Make your content area wider or narrower.

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

Source

Comprehensive List of Browser-Specific CSS Hacks

With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the 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 */

Source

Eric Meyers CSS重置

A CSS reset does what it sounds like: resets any inconsistencies in your stylesheet, so that your website will look consistent across all browsers. Things like margins, font sizes, default line heights, and so forth. The following CSS reset is by Eric Meyer, which has become a standard of sorts, hence the “ultimate” tag.

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

Source

重置所有颜色和链接的颜色变化

This resets all text and background colors so you’re back at square one with black text. Then it changes the color and style of links to distinguish from regular text and make them apparent that they’re links – change the color and styling to whatever you want.

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}

a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;
}

来源