常用CSS技巧（长期更新）

1、图像黑白处理

支持Chrome18.0、Firefox35、Safari6.0、oprea15.0以上版本以及IE6-9版本

img.desaturate {

    filter: grayscale(100%);

    /*TODO 对Firefox早期版本提供兼容支持，用户量少，可考虑删除此段代码*/

    filter: url('url("data:image/svg+xml;utf8, #grayscale");');

    /*TODO gray属性值仅兼容IE6-IE9，未来可考虑删除此段*/

    filter: gray;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

}

可以使用这一段代码对IE10和IE11进行处理，毕竟用户量还不少。

function grayscaleIe(src) {

    var canvas = document.createElement('canvas');

    var ctx = canvas.getContext('2d');

    var imgObj = new Image();

    imgObj.src = src;

    canvas.width = imgObj.width;

    canvas.height = imgObj.height;

    ctx.drawImage(imgObj, 0, 0);

    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

    for(var y = 0; y < imgPixels.height; y++) {

        for(var x = 0; x < imgPixels.width; x++) {

            var i = (y * 4) * imgPixels.width + x * 4;

            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

            imgPixels.data[i] = avg;

            imgPixels.data[i + 1] = avg;

            imgPixels.data[i + 2] = avg;

        }

    }

    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

    return canvas.toDataURL();

}

2. 使用 :not() 选择器排除所选择的某一个元素。查看CSS选择器

直接使用 :not() 伪类来设置菜单元素之间的间隔线，支持主流浏览器以及IE8以上版本。

.nav li:not(:last-child) {

  border-right: 1px solid #666;

}

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

3. 页面顶部阴影

下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果，所有主流浏览器都支持 :before 选择器。在IE8及以下版本中，必须声明，否则无效。

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;

}

4. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

body {

  line-height: 1;

}

这样文本元素就可以很容易地从 body 继承。

5. 所有一切都垂直居中

除IE外的主流浏览器均能很好的支持，因此在IE中使用要特别注意。当然因为flex，所以就不要考虑IE10以下的版本了。

html, body {

  height: 100%;

  margin: 0;

}

body {

  -webkit-align-items: center; 

  -ms-flex-align: center; 

  align-items: center;

  display: -webkit-flex;

  display: flex;

}

6. 逗号分隔的列表

让html列表项看上去像一个真正的，用逗号分隔的列表：

ul > li:not(:last-child)::after {

  content: ",";

}

7. 使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

li {

  display: none;

}

li:nth-child(-n+3) {

  display: block;

}

8. 对图标使用 SVG

极力推荐使用SVG做字体图标。毕竟，目前浏览器几乎都能支持字体图标，且兼容性表现极好，包括古老的IE6。

.logo {

  background: url("logo.svg");

}

另外，如果您的项目已经舍弃IE8以下版本，那也可以采用另一种方案，我们可以在项目构建的时候，将图标以basc64编码的方式引入到我们的CSS代码中，这样的话对于图标便可以做到0个http请求，加载速度自然能够非常快，也减少了制作字体图标所花费的时间。但是弊端也明显，会明显增大被嵌入代码的体积，所以使用的时候请设置先决条件：‘仅用小于30K的小图标，且不要在HTML中使用’，避免滥用造成的性能问题。

9. 优化显示文本（请不要在IE浏览上使用，包括Edge）

font-smoothing: grayscale将对字体图标文件抗锯齿反走样作出处理，使图标字体更清晰，防止模糊。以后不用再吆喝‘为什么我的字体图标有点模糊了’。虽然已有不少网站使用，但毕竟还不是标准属性，所以还请谨慎，具体是否使用待看过一篇权威文档后再做考量。

text-rendering 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡，仍然请看文档再决定是否使用。

html {

  -moz-osx-font-smoothing: grayscale;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}

注：请负责任地使用 optimizeLegibility，使用它后浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效，该属性值在移动设备上会造成比较明显的性能问题。此外，IE /Edge没有 text-rendering 支持。

10. 对纯 CSS 滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块，感觉鸡肋，也许是我无知无畏吧。

.slider ul {

  max-height: 0;

  overlow: hidden;

}

.slider:hover ul {

  max-height: 1000px;

  transition: .3s ease;

}

11. 继承 box-sizing

让 box-sizing 继承 html，关于box-sizing的知识点请查看菜鸟教程中相关的描述。

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

推荐使用，这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

12. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

.calendar {

  table-layout: fixed;

}

推荐使用，且兼容性良好，目前多有浏览器均支持此段代码。

13. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了，推荐使用。但因为使用的Flexbox，请小心老古董IE。

.list {

  display: flex;

  justify-content: space-between;

}

.list .person {

  flex-basis: 23%;

}

14. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^="http"]:empty::before {

  content: attr(href);

}

相当方便，但要小心IE，在IE9及以上浏览器中才生效。

15. CSS 写出三角形

利用border来写三角形代码，并且兼容IE6。这是个神技能，神技巧。

/* 上三角 */

div.arrow-up {

  width:0px;

  height:0px;

  border-left:5px solid transparent;  /* left arrow slant */

  border-right:5px solid transparent; /* right arrow slant */

  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */

  font-size:0px;

  line-height:0px;

}

/* 下三角 */

div.arrow-down {

  width:0px;

  height:0px;

  border-left:5px solid transparent;

  border-right:5px solid transparent;

  border-top:5px solid #2f2f2f;

  font-size:0px;

  line-height:0px;

}

/* 左三角*/

div.arrow-left {

  width:0px;

  height:0px;

  border-bottom:5px solid transparent;  /* left arrow slant */

  border-top:5px solid transparent; /* right arrow slant */

  border-right:5px solid #2f2f2f; /* bottom, add background color here */

  font-size:0px;

  line-height:0px;

}

/* 右三角 */

div.arrow-right {

  width:0px;

  height:0px;

  border-bottom:5px solid transparent;  /* left arrow slant */

  border-top:5px solid transparent; /* right arrow slant */

  border-left:5px solid #2f2f2f; /* bottom, add background color here */

  font-size:0px;

  line-height:0px;

}

16. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现，推荐使用，可以在重影字。-webkit-mask-image，仅可以使用在-webkiet浏览器中，其他浏览器参考，算了，别参考了，老老实实在手机端使用吧。

但是在firefox57.0.4中好像是支持的，其它的我再也不知道了。

HTML：

CSS：

h2[data-text] {

  position: relative;

}

h2[data-text]::after {

    content: attr(data-text);

    z-index: 10;

    color: #e3e3e3;

    position: absolute;

    top: 0;

    left: 0;

    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(138,200,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

17. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了，可惜了IE系列仅支持IE11。

.disabled { pointer-events: none; }

18. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！仅支持IE9以上

.blur {

  color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

说了这么多，恩，IE有病，但是用户量还不少呢。