20个CSS高级技巧汇总(推荐)资源-CSDN文库

25 浏览量 2021-01-19 21:19:27 上传评论收藏 78KB PDF 举报

资源推荐

资源详情

资源评论

20 个个 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;

}

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

// 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. 所有一切都垂直居中所有一切都垂直居中

要将所有元素垂直居中，太简单了：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38592611

粉丝: 8
资源: 879

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip