css技巧（常用）

1、zoom属性设置作用是设置或者检索对象的缩放比例；例：

Zoom：1；  大小为默认（normal）；

Zoom：2；  大小为默认的两倍；

2、font属性：（font-family，font-style，font-variant，font-weight，font-size，font）

font: bold 36px/48pxArial, Helvetica, sans-serif;

表示font-size为36px，line-height为48px；

3、注释css样式：

可以在样式前面加‘*’或者‘1’，使样式失效；例：

     *display:inline;

     *zoom:1;

4、用css构造三角形（构造三角形的方法是，div本身长宽设为0，div的边框设大，然后把其他三边设为透明，留下其中一边。）

.s{
    	width:0;
   	height: 0;
   	border-color: transparent transparent transparent #f40;
  	border-width: 20px;
	border-style: solid;

}

5、彩色图片变成黑白（灰度可调节）

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

6、给页面顶部加上阴影效果

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

7、让页面的一切都垂直居中

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

8、实现逗号分隔的列表（可换成任何符号）

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

9、给body增加行高（不需要分别添加 line-height 到每个p,h标记等）

body {
	line-height: 1;
      }

10、继承 box-sizing（这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了）

html {
	box-sizing: border-box;
	}
*, *:before, *:after {
		  box-sizing: inherit;
		}

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

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

12、禁用鼠标事件 （例如，一个连接如果设置了下面的样式就无法点击了）

.disabled { pointer-events: none; }

13、模糊文本

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

14、图像代替文本（这招经常被用来把一个基于文本的

title

标题换成图片）
解释说明： text-indent:-9999px; 利用缩进把文本撤掉，然后用指定了背景和长宽的图片代替。

h1 {
	text-indent:-9999px;
	background:url("title.jpg") no-repeat;
	width:100px;
	height:50px;
	}

15、尽可能用CSS animation 取代 Javascript