CSS高级技巧

1.照片显示为黑白图像
html：

<img src="cc.jpg" width="160px" height="100px" class="desaturate">

css：

img.desaturate {    filter: grayscale(100%);    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);}

2.:not() 选择器
先给每一个菜单项添加边框：

.nav li {  border: 1px solid #666;}

然后再除去最后一个元素：

.nav li:last-child {  border: none;}

---

等同于：

.nav li:not(:last-child) {  border: 1px solid #666;}

3.css3页面顶部阴影

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添加行高

body {  line-height: 1;}

5.所有元素垂直居中

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

注意：IE11 小心flexbox
6.逗号分隔列表

ul > li:not(:last-child)::after {  content: ",";}

列表并排显示：display:inline;
列表块状显示：display:block;
7.使用负的nth-child选择项目
在css中使用负的nth-child选择项目1到项目n显示出来。

li {  display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) {  display: block;}

8.对图标使用SVG
SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

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

9.优化显示文本

html {  -moz-osx-font-smoothing: grayscale;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;//此属性不支持IE/Edge}

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

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

12.表格单元格等宽
需要定义table宽度。

<table class="one" border="1" width="100%"><tr><td>11</td><td>22222223</td></tr><tr></table>table.one{    table-layout:fixed;}

13.用 Flexbox 摆脱外边距的各种 hack
列表分隔符就会在均匀间隔的位置出现。

<nav>  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></nav>nav ul {    display: flex;    justify-content: space-between;}

14.使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：

<a href="http://www.baidu.com"></a>a[href^="http"]:empty::before {  content: attr(href);}

显示的是：http://www.baidu.com
15.检测鼠标双击
html：

<div class="test3">  <span><input type="text" value=" " readonly="true" />  <a href="http://renpingjun.com">Double click me</a></span></div>

css：

.test3 span {  position: relative;}.test3 span a {  position: relative;  z-index: 2;}.test3 span a:hover, .test3 span a:active {  z-index: 4;}.test3 span input {  background: transparent;  border: 0;  cursor: pointer;  position: absolute;  top: -1px;  left: 0;  width: 101%;  /* Hacky */  height: 301%; /* Hacky */  z-index: 3;}.test3 span input:focus {  background: transparent;  border: 0;  z-index: 1;}

16.css写出三角形

/* create an arrow that points up */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;}/* create an arrow that points down */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;}/* create an arrow that points left */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;}/* create an arrow that points right */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;}

17.calc()的使用
用法：能够给元素设置动态的值

/* basic calc */.simpleBlock {  width: calc(100% - 100px);}/* calc in calc */.complexBlock {  width: calc(100% - 50% / 3);  padding: 5px calc(3% - 2px);  margin-left: calc(10% + 10px);}

18.禁用鼠标事件

.disable{ pointer-events:none;}

19.模糊文本

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

20.文字背后加横线

h4 {    text-align: center;    background-image: -webkit-linear-gradient(270deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);    background-image: -moz-linear-gradient(270deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);    background-image: -o-linear-gradient(270deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);    background-image: linear-gradient(180deg, rgba(255,255,255,1.00) 49.5%, rgba(0,0,0,1.00) 50%, rgba(255,255,255,1.00) 50.5%);}h4 span {    background-color: white;}