前端常用的css以及css3技巧

前端常用的css以及css3

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

文章目录

• • 黑白图像
  • 使用:not()在菜单上应用/取消应用边框
  • 对图标使用 SVG
  • 继承 box-sizing
  • CSScalc()的使用
  • css多行文本超出部分显示 ...

黑白图像

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