愿你如夏日清凉的风
愿你如夏日清凉的风

可能会用到的CSS样式

多栏CSS3

使用css3来创建多栏，它可以自适应网页，不兼容IE

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

用CSS包裹内容很长的URL和文本

这个代码片段通过保证文本的包裹元素宽度适应内容的宽度，能够避免很长的文本超出内容区域。

pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

用css3创造3D文字

text-shadow属性能帮助你只用CSS创造3D文字。·

p.threeD{
    text-shadow:
        -1px 1px 0 #ddd,
        -2px 2px 0 #c8c8c8,
        -3px 3px 0 #ccc,
        -4px 4px 0 #b8b8b8,
        -4px 4px 0 #bbb,
        0px 1px 1px rgba(0,0,0,.4),
        0px 2px 2px rgba(0,0,0,.3),
        -1px 3px 3px rgba(0,0,0,.2),
        -1px 5px 5px rgba(0,0,0,.1),
        -2px 8px 8px rgba(0,0,0,.1),
        -2px 13px 13px rgba(0,0,0,.1);
}

IEcss hack

IE6：_
IE6/7： *
IE7/Firefox：!important
IE7：*+
IE6/7/8：\9
IE8：\0
safari : select{ [;line-height: 36px;] }
条件hack 
IE7以下版本：
IE7：
IE8：
IE8以上：兼容性

3D效果的按钮

以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：

a{
    display: block;
    border: 1px solid;
    border-color: #aaa #000 #000 #aaa;
    width: 8em;
    background: #fc0;
}

a:hover{
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #000 #aaa #aaa #000;
}

字符方面的选择器

 p:first-letter { ... }

设置对象内的第一个字符的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。
当你想加强每一段中的第一个字符时，这个CSS属性特别有用。
比如，段落首字下沉，

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


p:first-line { ... }

设置对象内的第一行的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。
这个和first-letter类似的用法，不同的是，这个指定的第一行。

SVG图片

没有理由不使用 SVG 图标：

.logo {
  background: url("logo.svg");
}

SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器，丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意： 针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助：

.no-svg .icon-only:after {
  content: attr(aria-label);
}

通配符选择器

* + * {
  margin-top: 1.5em;
}

通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用，效果非凡
在此示例中，文档流中的所有的相邻兄弟元素将都将设置 margin-top: 1.5em 的样式。

创造格子等宽的表格

table-layout: fixed 可以让每个格子保持等宽：

.calendar {
  table-layout: fixed;
}

利用 Flexbox 去除多余的外边距

与其使用 nth-， first-， 和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性：

.list {
display: flex;
justify-content: space-between;
}

.list .person {
flex-basis: 23%;
}
列之间的间隙总是均匀相等。

利用属性选择器来选择空链接

当 '< a>' 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：

a[href^="http"]:empty::before { 
    content: attr(href);
}

相当简便。

为破碎图象定义样式

只要一点CSS就可以美化破碎的图象

img {  
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

以添加伪元素的法则来显示用户信息和URL的引用：

img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

为更好的移动体验，为表单元素设置字体大小

当触发