《必学》经常使用而且又很有用的css技巧

来源:未知 人浏览 2017.04.06

css是一种很神奇的巧妙语言,很多时候巧妙的运用可以让你节省不少时间

下面我们就来展示一下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() 在菜单上应用/取消应用边框

    先给每一个菜单项添加边框

    /* add border */

    .nav li {

      border-right: 1px solid #666;

    }

    ……然后再除去最后一个元素……    

    //code from http://caibaojian.com/useful-css-tips.html

    // remove border /    

    .nav li:last-child {

      border-right: none;

    }

    ……可以直接使用 :not() 伪类来应用元素:    

    .nav li:not(:last-child) {

      border-right: 1px solid #666;

    }

    这样代码就干净,易读,易于理解了。    

    当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):    

    //code from http://caibaojian.com/useful-css-tips.html

    ..nav li:first-child ~ li {    

      border-left: 1px solid #666;

    }

3、页面顶部阴影

    下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果:

    //code from http://caibaojian.com/useful-css-tips.html

    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;

    }

4、给 body 添加行高

    你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:

    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; 

    }

    注意:在IE11中要小心flexbox。


星期三
15年12月16日
热门板块
windows 10下载设计软件下载PhotoShop CC文章分享Portraiture磨皮win10安装教程
热门下载
Lightroom 5.2官方中文版下载下载(

Lightroom 5.2官方中文版下载下载(

下载
PhotoShop CC下载官方正版可激活版本

PhotoShop CC下载官方正版可激活版本

下载