平常工作中，为了能够更好的掌握CSS这一个模块，我们需要掌握更多关于它的知识，不仅仅是掌握它的全部必要的知识，掌握一些小技巧对我们的帮助也是非常大的，这样我们就可以走更少的弯路，减少一些不必要的步骤，可以更快的完成代码的产出。
1.文本渐变
文本渐变效果还是很常用的
h2[data-text] { position: relative; } h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -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)));}
2.垂直居中
flex布局 yyds
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
3.给 body 添加行高
不需要分别添加 line-height 到每个p,h标记等。只要添加到 body
body { line-height: 1; }
4.页面顶部阴影
简单的 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; }
5.优化不同设备显示文本
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
6. Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
7.使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接
a[href^="http"]:empty::before { content: attr(href); }
8.CSS 三角形
常用的三角形
div { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:5px solid #2f2f2f; font-size:0px; line-height:0px; }
9.calc() 给元素设置动态的值
/* basic calc */ .simpleBlock { width: calc(100% - 100px); } /* calc in calc */ .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px); }
10.模糊文本
文本模糊效果
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
