30+有用的CSS代码片段

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了30+有用的CSS代码片段，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11777字，纯文字阅读大概需要17分钟。

内容图文

　　在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。除了那些解决常见的恼人的问题外，也包含了一些解决新问题的新技术。

技术分享

　1. 垂直对齐

　　如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题：

.vc{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

　2. 只在一侧或者两侧具有投影

.box-shadow {
    background-color: #AC92EC;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

　3. 渐变背景动画效果

　　从CSS3开始，动画变得非常的酷了，但是切不可过分的使用它们。下面这一技巧巧妙地的移动背景位置，使其看起来像动画一样：

button {
    padding: 15px;
    background-image: linear-gradient(#FC6E51, #FFF);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
button:hover {
    background-position: 0 0;
}

　4. 将文本分成多列

div
{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

　5. 表格自动宽度

td {
    white-space: nowrap;
}

　6. 像出版物一样，第一个字变得大些

p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 28px;
  font-weight: bold;
}

　7. 特定浏览器的CSS Hacks的完整列表

　　有时候解决跨浏览器兼容性可能会非常的棘手，但这些特定浏览器的技巧可能会帮你解决问题。

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

　8. 创建模糊文本

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

　9. 不使用表格实现跨浏览器垂直水平居中图片

　　这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片，这是 IE 的一个hack：

<figure class=‘logo‘>
    <span></span>
    <img class=‘photo‘/>
</figure>
.logo {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  height: 74px;
  width: 74px; }
  .logo * {
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
    .logo .photo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%; }

　10. 高亮选中的 input

// HTML
<input id="mycheck1" type="checkbox" />
<label for="mycheck1">Check box label here</label>
<br />
<input id="mycheck2" type="checkbox" checked/>
<label for="mycheck2">Check box label here</label>
<br />
<input id="mycheck3" type="checkbox" />
<label for="mycheck3">Check box label here</label>

// CSS
input:checked + label{
    background: yellow;  
}

　11. 跨浏览器透明度

selector {
    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 */
}

　12. CSS投影

// 外投影
.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

// 内投影
.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

　13. 跨浏览器最小高度

#div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

　14. 固定 Footer

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

　15. 清除浮动 Clearfix

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

　16. 给可点击元素添加手型光标

a[href], input[type=‘submit‘], input[type=‘image‘], label[for], select, button, .pointer {
       cursor: pointer;
}

　17. iPad 定向CSS

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .portrait { display: none; }
}
 
<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>

　18. Pre 标签内文本换行

pre{
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
}

　19. CSS3媒体查询

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

　20. 重置加载

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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need ‘cellspacing="0"‘ in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

　21. 多边框

元素必须是相对定位，且具有足够的padding来显示多余的边框：

#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}
#borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}
 
#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}

　22. 移除IE中textarea的滚动条

textarea { overflow: auto; }

　23. 简单但好看的引用样式

技术分享

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

　24. :-moz-placeholder

<!doctype html>
<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

　25. 另一种固定footer的方式

* { margin:0; padding:0; } 
 
html, body, #wrap { height: 100%; }
 
body > #wrap {height: auto; min-height: 100%;}
 
#main { padding-bottom: 150px; }  /* must be same height as the footer */
 
#footer {
        position: relative;
        margin-top: -150px; /* negative value of footer height */
        height: 150px;
        clear:both;} 
 
/* CLEAR FIX*/
.clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
<div id="wrap">
 
        <div id="main" class="clearfix">
 
        </div>
 
</div>
 
<div id="footer">
 
</div>

　26. 背景透明

.rgba {
  background-color: transparent;
  background-color: rgba(200,200,200,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

　27. 居中未知宽度的DIV元素

.content {
    margin: 0 auto 8px;
    display: table;
    }
 
.content div {
    display: table-cell;
    }
 
<!--[if IE]>
.content {
    display: block;
    text-align: center;
    }
.content div {
    display: inline;
    zoom: 1;
}
<![endif]-->

　28. 根据文件类型设置样式

/* external links */
a[href^="http://"]
{
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;
}

　29. 解决IE6/7双倍margin/padding问题

ul li
{
  float: right;
  margin-right: 10px;
  *display: inline; /*Target IE7 and bellow*/
  _display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */

　30. 更改选中文本的样式

::selection
{
color: white;
background-color: red;
}
 
::-moz-selection  /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}

　31. 首字下沉

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

　　via：designyourway.net，翻译：info.9iphp.com

原文：http://www.cnblogs.com/elvisblogs/p/5424333.html

内容总结

以上是互联网集市为您收集整理的30+有用的CSS代码片段全部内容，希望文章能够帮你解决30+有用的CSS代码片段所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1200635.html

来源：【匿名】

【上一篇】Div+Css画圆示例代码【下一篇】php无法调用css怎么办

更多 ►

【30+有用的CSS代码片段】教程文章相关的互联网学习教程文章

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情，但是我们这里列出了一些相对于其他的更有用的代码片段，不要被这些代码的长度所吓到，因为它们都很容易实现，并且具有良好的文档。除了那些解决常见的恼人的问题外，也包含了一些解决新问题的新技术。　1. 垂直对齐　　如果你之前遇到过这个问题，你就应该知道它是多么的烦人，幸运的是，现在你可以使用CSS3变换来解决这个问题：.vc{position: relative;top: 50%;-webkit-tr...

CSS代码片段【代码】

定位:将元素居中将元素水平居中将元素垂直居中样式:文字毛玻璃效果-------------------------------------------代码------------------------------------------------------将元素居中:1.使用绝对定位实现1{width: 50px;height: 50px; /*设置元素宽高*/position: absolute; /*修改为绝对定位*/top: 50%;left: 50%; /*设置与上、左的距离*/margin-top: -25px;margin-left: -25px; /*外边距分别为宽高的一半*/}2....

30+有用的CSS代码片段【代码】【图】

创建漂亮的CSS按钮的10个代码片段【图】

如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。网页设计师已经不必再依赖 Photoshop 制作酷炫的按钮了。通过使用 CSS3，你可以实现背景的渐变、阴影以及光泽/闪亮的效果。1. Plastic Buttons这组按钮相当的简洁、干净。由于它们拥有不同的颜色、尺寸以及风格，并提供了小、中...

实用的60个CSS代码片段

1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{position: relative;top: 50%;-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); } 使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，Chrome 4, Opera 10, Safari 3, Firefox 3, and...

【HTML+CSS基础】代码片段_html/css_WEB-ITnose

内容简介：本文收集了我常用的CSS代码片段！ *reset /** reset **/body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, form, textarea { margin: 0; }body { font-family: arial, \5b8b\4f53; font-size: 12px; line-height: 1.5; }h1, h2, h3, h4, h5, h6, input, textarea, section { font-size: 100%; }input, textarea, section { font-family: inherit; }ul, ol { padding-left: 0; list-style-type: none; }tab...

一些实用的CSSMediaQuery代码片段，个人采集_html/css_WEB-ITnose

CSS3的出现让响应式Web设计变得简单，CSS3提供了强大的media queries，允许你针对不同的条件设置不同的样式，可以在不修改页面内容的情况下，为不同设备提供不同的样式效果。以下是一些CSS media queries代码片段，你可以添加在自己的项目中，让页面根据屏幕自适应：iPhone5 Css代码 @media screen and (device-aspect-ratio: 40/71) { } or @medi...

CSS中编写省略号代码片段_html/css_WEB-ITnose

?? #component-content #dtMain .dt-ul > li .component-item .component-name{ display:inline-block; text-align:center; height:37px; line-height:37px; padding:0px 10px 0px 10px; width:90px; overflow:hidden; text-overflow:ellipsis; white-s...

60个有用CSS代码片段_html/css_WEB-ITnose

1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } (ps:【译】如何实现CSS居中？–CSS居中常用方法)使用这个技巧，从...

notepad++有没有代码片段插件？_html/css_WEB-ITnose

notepad++ 编辑器代码片段可以自定义保存代码片段，以列表形式显示在右边，跪求回复讨论(解决方案) 看看这个 http://stackoverflow.com/questions/5147177/notepad-code-snippets-manager 看看这个 http://stackoverflow.com/questions/5147177/notepad-code-snippets-manager 太感谢你了，就是他

【译】60个有用CSS代码片段_html/css_WEB-ITnose

1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} (ps:【译】如何实现CSS居中？?CSS居中常用方法) 使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Trans...

一些有用的CSS代码片段【图】

60个有用CSS代码片段1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：.verticalcenter{position: relative;top: 50%;-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);}(ps:【译】如何实现CSS居中？–CSS居中常用方法) 使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的...

CSS - 技术教程分类

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表 CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓（outline）属性 CSS margin(外边距) CSS padding（填充） CSS 尺寸 (Dimension) CSS Position(定位) CSS Overflow CSS Float（浮动） CSS 对齐 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例 Viewport 媒体查询图片视频(Video) 框架 CSS 参考手册 CSS 选择器 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 css 全部

CSS - 最热教程

设置DIV的背景色有哪几种方法 js批量设置元素样式和封装似于jquery的...HTML5实战与剖析之CSS选择器——getEle...css如何设置文本元素内的空白填充？如何压缩css文件 cssright属性怎么用 cssanimation-timing-function属性怎么...jquery设置内联样式css()jQuery+HTML5+CSS3制作支持响应式布局时...jquery实现动态改变css样式的方法分析

首页 / CSS / 30+有用的CSS代码片段

30+有用的CSS代码片段

内容导读

内容图文

1. 垂直对齐

2. 只在一侧或者两侧具有投影

3. 渐变背景动画效果

4. 将文本分成多列

5. 表格自动宽度

6. 像出版物一样，第一个字变得大些

7. 特定浏览器的CSS Hacks的完整列表

8. 创建模糊文本

9. 不使用表格实现跨浏览器垂直水平居中图片

10. 高亮选中的 input

11. 跨浏览器透明度

12. CSS投影

13. 跨浏览器最小高度

14. 固定 Footer

15. 清除浮动 Clearfix

16. 给可点击元素添加手型光标

17. iPad 定向CSS

18. Pre 标签内文本换行

19. CSS3媒体查询

20. 重置加载

21. 多边框

22. 移除IE中textarea的滚动条

23. 简单但好看的引用样式

24. :-moz-placeholder

25. 另一种固定footer的方式

26. 背景透明

27. 居中未知宽度的DIV元素

28. 根据文件类型设置样式

29. 解决IE6/7双倍margin/padding问题

30. 更改选中文本的样式

31. 首字下沉

内容总结

内容备注

内容手机端

【30+有用的CSS代码片段】教程文章相关的互联网学习教程文章

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程

　1. 垂直对齐

　2. 只在一侧或者两侧具有投影

　3. 渐变背景动画效果

　4. 将文本分成多列

　5. 表格自动宽度

　6. 像出版物一样，第一个字变得大些

　7. 特定浏览器的CSS Hacks的完整列表

　8. 创建模糊文本

　9. 不使用表格实现跨浏览器垂直水平居中图片

　10. 高亮选中的 input

　11. 跨浏览器透明度

　12. CSS投影

　13. 跨浏览器最小高度

　14. 固定 Footer

　15. 清除浮动 Clearfix

　16. 给可点击元素添加手型光标

　17. iPad 定向CSS

　18. Pre 标签内文本换行

　19. CSS3媒体查询

　20. 重置加载

　21. 多边框

　22. 移除IE中textarea的滚动条

　23. 简单但好看的引用样式

　24. :-moz-placeholder

　25. 另一种固定footer的方式

　26. 背景透明

　27. 居中未知宽度的DIV元素

　28. 根据文件类型设置样式

　29. 解决IE6/7双倍margin/padding问题

　30. 更改选中文本的样式

　31. 首字下沉