CSS黑科技，了解一下

边框渐变

background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(135deg,#000,#000),linear-gradient(135deg,#E70303,#FFFF44);
border:2px transparent solid;

备注：使整个background渐变，background-image中第一段的linear-gradient使得div里的渐变色覆盖成黑色，从而保留border上的渐变色

屏蔽ios和android下点击元素时出现的阴影

-webkit-tap-highlight-color:rgba(255,255,255,0);

备注：transparent的属性值在android下无效

屏蔽输入框怪异的内阴影

-webkit-appearance:none;

iOS下让动画更加流畅

-webkit-transform:translate3d(0, 0, 0);

备注：这个属性会调用硬件加速模式，但是在android下不可乱用，会出现很多让你凉凉的bug

清除css中select的下拉箭头样式

select {
    /*Chrome和Firefox里面的边框是不一样，复写*/
    border: solid 1px #000;

    /*将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}


/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { 
    display: none; 
}

CSS背景图片高度自适应

.ddd {
	background-image: url(img/test.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	width: 100%;
}

.ddd:before {
	content: "";
	display: block;
	padding-top: 60%; // 图片真实高度/宽度 * 100
}