前端常用的css以及css3

首先给大家推荐一个款很不错的微信小程序，
可以逗逗身边朋友，或者你有时候想脱身的时候，想找个理由接口 那么这个绝对是神器

黑白图像

1.这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

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

使用:not()在菜单上应用/取消应用边框

这样代码就干净

.nav li {border-right: 1px solid #666;
}**除去最后一个元素**.nav li:last-child {border-right: none;
}//---可以直接使用 not（:last-child）
.nav li:not(:last-child) {border-right: 1px solid #666;
}

对图标使用 SVG

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

继承 box-sizing

让 box-sizing 继承 html：

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

CSScalc()的使用

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

css多行文本超出部分显示 …

.clamp-text {  display: -webkit-box;  -webkit-line-clamp: 3; /* 这里设置你想要的行数 */  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;  }