公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

20个很有用的CSS技巧

下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对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;
}

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

// remove border /

.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);
    -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;
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)