CSS使用必知的20个小技巧

 　　们在利用CSS控制样式的时候，有些基本的技巧知识还是需要了解的。这样不仅仅能够帮助我们实现想要的效果，同时也能够提高我们的工作效率。接下来看看郑州清新教育郑州网页设计培训的老师为大家整理的这20个技巧吧!

　　1　. 黑白图像

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

　　CSS Code

　　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.}

　　8.

　　2. 使用 :not() 在菜单上应用/取消应用边框

　　先给每一个菜单项添加边框

　　CSS Code

　　1./* add border */

　　2..nav li {

　　3. border-right: 1px solid #666;

　　4.}

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

　　6.

　　7.// remove border /

　　8.

　　9..nav li:last-child {

　　10. border-right: none;

　　11.}

　　12.……可以直接使用 :not() 伪类来应用元素：

　　13.

　　14..nav li:not(:last-child) {

　　15. border-right: 1px solid #666;

　　16.}

　　这样代码就干净，易读，易于理解了。

　　当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符(~)：

　　CSS Code

　　1...nav li:first-child ~ li {

　　2.

　　3. border-left: 1px solid #666;

　　4.}

　　5.

　　3. 页面顶部阴影

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

　　CSS Code

　　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.}

　　15.

　　4. 给 body 添加行高

　　你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

　　CSS Code

　　1.body {

　　2. line-height: 1;

　　3.}

　　这样文本元素就可以很容易地从 body 继承。

　　5. 所有一切都垂直居中

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

　　CSS Code

　　1, 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.}

　　13.

　　看，是不是很简单。

　　注意：在IE11中要小心flexbox。

　　6. 逗号分隔的列表

　　让html列表项看上去像一个真正的，用逗号分隔的列表：

　　CSS Code

　　1.ul > li:not(:last-child)::after {

　　2. content: ",";

　　3.}

　　4.

　　对最后一个列表项使用 :not() 伪类。

　　7. 使用负的 nth-child 选择项目

　　在CSS中使用负的 nth-child 选择项目1到项目n。

　　CSS Code

　　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.}

　　9.

　　8. 对图标使用 SVG

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

　　CSS Code

　　1..logo {

　　2. background: url("logo.svg");

　　3.}

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

　　9. 优化显示文本

　　有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

　　XML/HTML Code

　　1 {

　　2. -moz-osx-font-smoothing: grayscale;

　　3. -webkit-font-smoothing: antialiased;

　　4. text-rendering: optimizeLegibility;

　　5.}

　　6.

　　注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

　　10. 对纯 CSS 滑块使用 max-height

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

　　CSS Code

　　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.}