关键词：
使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。
1. 黑白图像
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
1 img.desaturate 2 filter: grayscale(100%); 3 -webkit-filter: grayscale(100%); 4 -moz-filter: grayscale(100%); 5 -ms-filter: grayscale(100%); 6 -o-filter: grayscale(100%); 7
2. 使用:not()在菜单上应用/取消应用边框
先给每一个菜单项添加边框
1 /* add border */ 2 .nav li 3 border-right: 1px solid #666; 4
……然后再除去最后一个元素……
1 // remove border / 2 3 .nav li:last-child 4 border-right: none; 5
……可以直接使用 :not() 伪类来应用元素：
1 .nav li:not(:last-child) 2 border-right: 1px solid #666; 3
这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：
1 ..nav li:first-child ~ li 2 3 border-left: 1px solid #666; 4
3. 页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
1 body:before 2 content: ""; 3 position: fixed; 4 top: -10px; 5 left: 0; 6 width: 100%; 7 height: 10px; 8 9 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 10 -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 11 box-shadow: 0px 0px 10px rgba(0,0,0,.8); 12 13 z-index: 100; 14
4. 给 body 添加行高
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：
1 body 2 line-height: 1; 3
这样文本元素就可以很容易地从 body 继承。
5. 所有一切都垂直居中
要将所有元素垂直居中，太简单了：
1 html, body 2 height: 100%; 3 margin: 0; 4 5 6 body 7 -webkit-align-items: center; 8 -ms-flex-align: center; 9 align-items: center; 10 display: -webkit-flex; 11 display: flex; 12
看，是不是很简单。
注意：在IE11中要小心flexbox。
6. 逗号分隔的列表
让HTML列表项看上去像一个真正的，用逗号分隔的列表：
1 ul > li:not(:last-child)::after 2 content: ","; 3
对最后一个列表项使用 :not() 伪类。
7. 使用负的 nth-child 选择项目
在CSS中使用负的 nth-child 选择项目1到项目n。
1 li 2 display: none; 3 4 5 /* select items 1 through 3 and display them */ 6 li:nth-child(-n+3) 7 display: block; 8
8. 对图标使用 SVG
我们没有理由不对图标使用SVG：
1 .logo 2 background: url("logo.svg"); 3
SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
9. 优化显示文本
有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：
html -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。
10. 对纯 CSS 滑块使用 max-height
使用 max-height 和溢出隐藏来实现只有CSS的滑块：
1 .slider ul 2 max-height: 0; 3 overlow: hidden; 4 5 6 .slider:hover ul 7 max-height: 1000px; 8 transition: .3s ease; 9
11. 继承 box-sizing
让 box-sizing 继承 html：
1 html 2 box-sizing: border-box; 3 4 5 *, *:before, *:after 6 box-sizing: inherit; 7
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
12. 表格单元格等宽
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
1 .calendar 2 table-layout: fixed; 3
13. 用 Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：
1 .list 2 display: flex; 3 justify-content: space-between; 4 5 6 .list .person 7 flex-basis: 23%; 8
现在，列表分隔符就会在均匀间隔的位置出现。
14. 使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
1 a[href^="http"]:empty::before 2 content: attr(href); 3
相当方便。
15. 检测鼠标双击
HTML：
1 <div class="test3"> 2 <span><input type="text" value=" " readonly="true" /> 3 <a href="http://renpingjun.com">Double click me</a></span> 4 </div>
CSS：
1 .test3 span 2 position: relative; 3 4 .test3 span a 5 position: relative; 6 z-index: 2; 7 8 .test3 span a:hover, .test3 span a:active 9 z-index: 4; 10 11 .test3 span input 12 background: transparent; 13 border: 0; 14 cursor: pointer; 15 position: absolute; 16 top: -1px; 17 left: 0; 18 width: 101%; /* Hacky */ 19 height: 301%; /* Hacky */ 20 z-index: 3; 21 22 .test3 span input:focus 23 background: transparent; 24 border: 0; 25 z-index: 1; 26
16. CSS 写出三角形
1 /* create an arrow that points up */ 2 div.arrow-up 3 width:0px; 4 height:0px; 5 border-left:5px solid transparent; /* left arrow slant */ 6 border-right:5px solid transparent; /* right arrow slant */ 7 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */ 8 font-size:0px; 9 line-height:0px; 10 11 12 /* create an arrow that points down */ 13 div.arrow-down 14 width:0px; 15 height:0px; 16 border-left:5px solid transparent; 17 border-right:5px solid transparent; 18 border-top:5px solid #2f2f2f; 19 font-size:0px; 20 line-height:0px; 21 22 23 /* create an arrow that points left */ 24 div.arrow-left 25 width:0px; 26 height:0px; 27 border-bottom:5px solid transparent; /* left arrow slant */ 28 border-top:5px solid transparent; /* right arrow slant */ 29 border-right:5px solid #2f2f2f; /* bottom, add background color here */ 30 font-size:0px; 31 line-height:0px; 32 33 34 /* create an arrow that points right */ 35 div.arrow-right 36 width:0px; 37 height:0px; 38 border-bottom:5px solid transparent; /* left arrow slant */ 39 border-top:5px solid transparent; /* right arrow slant */ 40 border-left:5px solid #2f2f2f; /* bottom, add background color here */ 41 font-size:0px; 42 line-height:0px; 43
17. CSS3 calc() 的使用
calc() 用法类似于函数，能够给元素设置动态的值：
1 /* basic calc */ 2 .simpleBlock 3 width: calc(100% - 100px); 4 5 6 /* calc in calc */ 7 .complexBlock 8 width: calc(100% - 50% / 3); 9 padding: 5px calc(3% - 2px); 10 margin-left: calc(10% + 10px); 11
18. 文本渐变
文本渐变效果很流行，使用 CSS3 能够很简单就实现：
1 h2[data-text] 2 position: relative; 3 4 h2[data-text]::after 5 content: attr(data-text); 6 z-index: 10; 7 color: #e3e3e3; 8 position: absolute; 9 top: 0; 10 left: 0; 11 -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)));
办公资源网址导航 https://www.wode007.com
19. 禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
1 .disabled pointer-events: none;
20. 模糊文本
简单但很漂亮的文本模糊效果，简单又好看！
1 .blur 2 color: transparent; 3 text-shadow: 0 0 5px rgba(0,0,0,0.5); 4
十几个css高级常见技巧汇总（虚线框三角形优惠券卡券滚动条多行溢出...）...
大家好，我是漫步，今天来分享一些比较高级复杂的CSS技巧，都是我们平常常用的，或许对你有所帮助。设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选... 查看详情
css高级技巧(代码片段)
CSS高级技巧1.精灵图1.1为什么需要精灵图？1.2精灵图(sprites)的使用2.字体图标2.1字体图标的产生2.2字体图标的优点2.3字体图标的使用步骤2.3.1字体图标的下载2.3.2字体图标的使用2.5字体图标的追加2.6字体图标的加载原理3.CSS制作... 查看详情
前端基础-css高级技巧(代码片段)
css高级技巧一.精灵图1.为什么需要精灵图2.精灵图（sprites）的使用二.字体图标1.优点（了解）2.字体图标的下载3.适用场景4.CSS三角三.CSS用户界面样式1.鼠标样式2.取消表单轮廓和防止拖拽文本域四.vertical-align属性... 查看详情
css高级技巧背景和边框(代码片段)
box-shadowbox-shadow属性支持多个阴影，用逗号分隔使用inset时，需要同时增加相应的内边距边框内圆角的实现可以用该属性配合outline来实现，因为box-shadow时贴着圆角的，而outline显示为直角，此方案可能会在以后的提案中不可行outli... 查看详情
css入门知识汇总(代码片段)
...者使用CSS可以定义元素的样式，包括字体，颜色及其它的高级样式。采用CSS样式的优点：1.提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的大小。2.缩短改版时间，将表现与内容相分离。只要简单的修改... 查看详情
2017年总结的前端文章——css高级技巧汇总
1.页面顶部阴影body:before{content:"";position:fixed;top:-10px;left:0;width:100%;height:10px;box-shadow:0px0px10pxrgba(0,0,0,.8);z-index:100;}2.给body添加行高你不需要分别添加line-height到每个p,h标记等。只要添加到body即可：body{line-hei 查看详情
css样式也技巧(代码片段)
目录解决一字母和数字不能换行问题word-wrap:break-word;/*此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。*/word-break:break-all;/*是断开单词。在单词到边界时，下... 查看详情
js添加css样式方法汇总(代码片段)
1.js添加css样式方法汇总由于jquery支持css3，所有能很好的兼容很多浏览器，所以通过jquery来使用css样式比较好为定义好的css样式可以调用元素的css方法添加样式$("span").css("css属性名","属性值")如 $("span").css("color","red")将标签为s... 查看详情
任何时候都适用的20个c++技巧(代码片段)
...在C++书籍或者网站上找到。比如说，成员指针，即使对于高级程序员也是比较棘手,和易于产生bugs的，是应该尽量避免的问题之一。 Page1:Introduction 介绍接下来的这几条技巧主要集中于实用技术和一些晦涩知识上；它们与... 查看详情
css技巧汇总(代码片段)
CSS选择符优先级!important声明＞内联样式（style）＞id选择符（#id）＞类选择符（.class）＝伪类选择符（:hover）＝属性选择符（[attr]）＞类型选择符（标签）＝伪元素选择符（:first-child）sticky定位问题sticky定位的元素受父级块级元... 查看详情
15.css高级技巧(代码片段)
1.元素的显示与隐藏1）显示(display)display设置或检索对象是否及如何显示。display:none隐藏对象与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。特点：隐藏之后，不再保留位置。1<!DOCTYPEhtml>2<htmll... 查看详情
idea技巧汇总：这30个强大的功能，总有一个你能用上！(代码片段)
点击关注公众号，实用技术文章及时了解查看代码历史版本调整idea的虚拟内存：idea设置成eclipse的快捷键设置提示词忽略大小写关闭代码检查设置文档注释模板显示方法分隔符设置多行tab8.1tab过多会自动关闭快速匹配方... 查看详情
速度收藏20个常用的python技巧，太赞啦(代码片段)
...是其广受欢迎的两大原因，本文介绍20个常用的Python技巧来提高代码的可读性，并能帮助你节省大量时间，下面的技巧将在你的日常编码练习中非常实用。1.字符串反转使用Python切片反转字符串：\\#Reversingastringusing... 查看详情
20个chromedevtools调试技巧(代码片段)
译者按： ChromeDevTools很强大，甚至可以替代IDE了！原文: ArtofdebuggingwithChromeDevTools为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。谷歌开发者工具提供了一系列的功能来帮助开... 查看详情
markdownhive开发技巧汇总(代码片段)
"sed"高级实用功能汇总(代码片段)
sed命令有两个空间，一个叫patternspace，一个叫holdspace。这两个空间能够证明人类的脑瓜容量是非常小的，需要经过大量的训练和烧脑的理解，才能适应一些非常简单的操作。不信看下面简单的命令，作用是，删除文件中最后... 查看详情
css样式-高级边栏菜单wordpress插件(代码片段)
css高级技巧——精灵图，字体图标，三角形等(代码片段)
欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可博客园主页：博客园主页-冰山一树SankeyCSDN主页：CSDN主页-冰山一树Sankey前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css... 查看详情