在过去几年，CSS 的发展是很多 Web 设计者和开发人员未能想到的。CSS3 引入了新的功能，如
然而，CSS 仍继续在改善——尽管仍有一些不知名的属性。CSS变得更加有效率，并更接近于我们使用 Javascript 和其他 Web 编程语言想要实现的功能。
CSS3 允许你使用一个简单的逗号分隔列表,将多个背景应用于某个元素上。这时背景就会堆叠成层，第一个背景位于顶端，最后一个背景处于底部。注意只有列表中的最后一个背景色可以显示出来。
从上面的例子中可以看出，三个背景已经堆叠。同时为了控制图片的显示，这里又应用了其它的背景属性，如background-repeat和background-position。
你还记得当年你使用Photoshop创建基于图片的文本的日子吗？自从具有相同功能的CSS3background-clip新属性的出现，Photoshop 正慢慢淡出人们的视线。
现在你可以使用background-clip属性来剪切基于图片的文本。首先，你需要把图片的div元素放置在h1或你想要剪切的文本元素上。现在你就可以使用background-clip属性剪切基于文本的图片。请确保text-fill-color属性为transparent。
使用 CSS3，你可以创建一个假想的 3D 空间。这时元素需要一个视角才可以激活 3D 空间。有两种方式可以实现激活:使用transform属性和perspective属性值。
效果的实现是由你给定的值来确定的。值越小，越接近于 三维空间的Z平面。事实证明，示例效果最具有说服力。下面的程序演示了你如何使用transform属性来实现 3D 效果:
我最喜欢的 CSS3 功能之一就是，使用calc()函数计算元素的值。就像一个计算器，它可以执行简单的数学计算，如大小、 角度或频率。
在这个示例中，CSS 创建了一个容器盒子，其与浏览器边缘有一个 40 像素的边缘距离，并填充其余整个窗口。请看下面的图像结果 ︰
注意text-overflow可以和overflow属性一起使用，将文本设置为隐藏，滚动或者自适应。你也可以使用white-space:nowrap;来确定文本的布局方式。如下示例所示:
之前，你仅能通过Javascript来实现动画效果。现在，即使你不了解Javascript利用CSS3同样可以实现很炫酷的动画效果。
flexbox是 CSS3 的一种布局方式，他的创建是为了加强项的对齐方式、方向以及在容器内的排列顺序。其优点是可以适应于不同大小的屏幕和设备。
启用flexbox布局，你需要将其父元素的display属性设置为flex或者inline-flex。这样所有的子元素就会自动设设置为flex项。
CSS3 功能提供了惊人的效果,可以让一个元素逐渐从一个样式更改为另一种，并且根据于你的托管可以提高其加载速度。如果你不是一个程序员，对你想要创建一个简单的、 光滑的效果都非常有用。
如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！
W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS3、HTML5、Javascript、Vue、React、Mobile、动画等教程、译文和案例为主。
W3cplus提供相关广告展示与招聘发布，有需要的请联系：微信号w3cplus，E-mail:
常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML5、CSS3和CSS处理器等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3和动画的研究，是国内最早研究和使用CSS3和CSS处理器技术的一批人。现在主要在探讨学习Javascript、React和Vue相关技术知识。CSS3、CSS处理器和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。
本书是国内著名的Web前端专家历时2载的心血之作，根据最新的CSS3撰写，融入了作者在CSS领域多年的使用经验，旨在将本书打造成为CSS3领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。
本书理论知识系统全面，详细讲解了选择器、伸缩布局盒模型、渐变、过渡、动画等主题下涵盖的所有CSS3新特性。
湘B2-20110104-7，衡阳市雅米信息技术有限公司 © 2011-2020W3CPLUS，感谢Drupal开源技术。感谢七牛云存储提供静态资源空间。
