CSS属性难度Top

　　

　　CSS

　　CSS虽然大部分都是较容易理解的，但是众多的CSS属性，还是有部分需要花一定的精力去理解，下面是6个比较难理解的CSS属性排行情况。

　　私有前缀属性

　　难度指数：★ ★

　　使用频率：★ ★ ★ ★

　　对于很多初学者，在看CSS实例的时候，这些实例难免会出现一些浏览器的私有属性，比如-moz就是firefox浏览器的CSS私有属性，而-o就是opera浏览器的，-ms就是微软的IE浏览器的、-webkit就是chrome和safari浏览器的私有属性，面对这些私有属性，初学者往往感觉非常疑惑。

　　Gradient

　　难度指数：★ ★ ☆

　　使用频率：★ ★ ★ ★ ★

　　在没有这个属性以前，如果我们要实现一个渐变的背景效果，那么需要两张图片甚至多张图片，同时由于一个元素不支持多张背景图片的设置，所以就要多增加几个没有意义的元素来实现这个效果，现在好了，有了这个属性，我们就能够直接用css来实现基于颜色的渐变式背景，一些漂亮的CSS按钮库也是借助这个属性来做的，同时因为没有图片，所以我们的页面加载速度更快了。

　　background-position

　　难度指数：★ ★ ★

　　使用频率：★ ★ ★ ★ ★

　　从英文单词的意思来看，就是背景位置的意思，虽然意思很简单，但是很多初学者在使用这个属性来设置背景图像位置的时候，总会出现各种各样的“答非所问”情况，尤其是css sprite（css精灵）的引入，让这个属性更难理解。

　　对于初学者，可以先单独理解一张图片的情况，反反复复设置各种取值情况，从而不断熟悉这个属性，然后再学习css精灵。

　　从上面的使用频率来看，该CSS属性经常被使用，所以你有必要彻底明白。

　　animation动画属性系列

　　难度指数：★ ★ ★ ☆

　　使用频率：★ ★ ★ ★ ★

　　动画已经成为页面是否高大上的一个的重要标志，所以css3引入了动画一系列属性，利用这些属性，我们能够很快、很简单的创建动画效果，而这些动画之前要借助JavaScript来完成。

　　flex相关属性系列

　　难度指数：★ ★ ★ ★ ☆

　　使用频率：★ ★ ★ ☆

　　它是css里面一种新布局（css flexible box）的重要组成部分，利用它，只需要用较少的代码就可以实现复杂的布局，用过bootstrap的人都知道，可以利用它的12列布局轻松实现很多复杂的布局，现在这些都可以通过css的这个属性系列来实现了。

　　不过由于浏览器兼容的问题，所以导致很多人不愿意使用它，不过作为前端或者设计的你，还是有必要学习一下这些属性。

　　transform属性

　　难度指数：★ ★ ★ ★ ★

　　使用频率：★ ★ ★ ★ ☆

　　该css属性提供了旋转、扭曲、缩放和矩阵变换一个元素的功能，它与前面说的动画属性相结合，可以为一个元素实现非常丰富时髦的动画效果，而这些动画效果以前如果用JavaScript来实现的话，估计需要写很多行代码，也正因为它具备矩阵变换的功能，所以理解这个属性还是需要一点数学基础知识，尤其是线性代数和几何知识。