前端 | 20个常用的 CSS 技巧

黑白图像

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

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、页面顶部阴影

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

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、对图标使用 SVG

我们没有理由不对图标使用 SVG：

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

SVG 对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到 IE9。这样可以避开.png、.jpg 或.gif 文件了。

5、对纯 CSS 滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有 CSS 的滑块：

slider ul {
    max-height: 0;
    overflow: hidden;
}

slider:hover ul {
    max-height: 1000px;
    transition: .3s ease;
}

本文仅为转发学习使用，若侵犯到您的权益，请联系我立即删除！

原文链接：http://www.phpxs.com/code/1009945/