“小白，我们接着说CSS3动画的事情吧！今天上午你了解了一下关键帧keyframes，已经可以实现一些打开页面后自动执行的动画效果，现在我们试试通过jQuery动态给容器添加CSS3动画。”

“为什么要动态添加呢？”

“有时我们并不希望打开页面就执行一个动画，而是希望通过用户的点击或者鼠标移到某个元素上再触发对应的CSS3动画。你有没有发现，现在很多网站的图片鼠标移上去图片会稍微变大一点，鼠标移开后图片又会变回去，这些都是通过动态添加CSS3动画实现的。你能试着口头描述一下我刚说的图片效果是怎么实现的么？”

好程序员web前端分享下面这些CSS高级技巧，一般人我可不告诉他哦。

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

给body添加行高

所有一切都垂直居中

逗号分隔的列表

使用负的 nth-child 选择项目

对图标使用SVG

优化显示文本

对纯CSS滑块使用 max-height

继承 box-sizing

1.黑白图像

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

一、黑白图像

当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。

img.desaturate{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

对于web前端开发人员来说CSS是相当重要的知识点，特别是一些刚刚进入web前端行业的新手，更应该学好CSS。CSS在使用中也有一些小技巧，掌握了这些专业小技巧对于新手很有帮助，下面就给大家分享几个关于CSS的专业技巧。

1、使用 :not() 为导航添加/取消边框

很多人会这样给导航添加边框，然后给最后一个取消掉：

/* add border */
.nav li {
border-right: 1px solid #666;
}
/* remove border */
.nav li:last-child {
border-right: none;
}