常用的CSS

1.把彩色的图片变成黑白的图片

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-right: 1px solid #666;
}
//然后再去掉最后一个
.nav li:last-child{
     border-right: none;
}

//------------------------------
//可以直接使用:not()伪类来应用元素
.nav li:not(:last-child){
      border-right:1px solid #666;
}

//-------------------------------
//如果新元素有兄弟元素，也可以直接使用通用的兄弟选择符(~)
..nav li:first-child ~ li{
      border-left: 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);
         -mos-box-shadow:0px 0px 10px rgba(0,0,0,.8);
         box-shadow:0px 0px 10px rgba(0,0,0,.8);
}

4.body添加行高

//不需要分别添加line-height到每个p,h标签
body{
      line-height:1;
}//文本元素从body继承

5.将所有元素垂直居中

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

6.逗号分隔列表

//让HTML列表项看上去像一个真正的，用逗号分隔的列表
ul > li:not(:last-child)::after{
       content:",";
}//对最后一个列表项使用:not()伪类

7.使用负的nth-child选择项目

//使用负的nth-child选择项目1到项目n
li{display:none;}
li:nth-child(-n+3){display:block;}//选择项目1至3并显示它们

8.使用SVG图标

.logo{background:url("logo.svg");}
//SVG对所有的分辨率类型都具有良好的扩展性，可以避开.png、jpg或.gif文件了

9.优化显示文本

html{
      -mos-osx-font-smoothing:grayscale;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;//IE不支持text-rendering
}

10.模糊文本

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

11.禁用鼠标点击事件

//CSS3新增的pointer-events禁用元素的鼠标事件
.disabled{pointer-events:none;}

12.CSS3中使用calc()

//calc()用法类似于函数，给元素设置动态值
.simpleBlock{width:calc(100%-100px);}

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

13.文本渐变

h2[data-text]{position:relative;}
h2[data-text]::after{
       content:attr(data-text);
       z-index:10;
       color:#e3e3e3;
       position:absolute;top:0;left:0;
       -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

14.三角形(利用border来写三角形)

//向上
div.arrow-up{
       width:0px;height:0px;
       border-left:5px solid transparent;/*向左倾斜*/
       border-right:5px solid transparent;/*向右倾斜*/
       border-bottom:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}

//向下
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;
}

//向左
div.arrow-left{
       width:0px;height:0px;
       border-bottom:5px solid transparent;
       border-top:5px solid transparent;
       border-right:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}

//向右
div.arrow-right{
       width:0px;height:0px;
       border-bottom:5px solid transparent;
       border-top:5px solid transparent;
       border-left:5px solid #2f2f2f;
       font-size:0px;
       line-height:0px;
}

常用的CSS

推荐阅读更多精彩内容