在过去几年，CSS 的发展是很多 Web 设计者和开发人员未能想到的。CSS3 引入了新的功能，如 border-radius, box-shadow, text-shadow, text-overflow, multiple-background, transition, flexbox、animation以及媒体查询等。
然而，CSS 仍继续在改善——尽管仍有一些不知名的属性。CSS变得更加有效率，并更接近于我们使用 JavaScript 和其他 Web 编程语言想要实现的功能。
在这篇文章之中，我们会介绍一些现代网页设计必不可少的一些 CSS3 的功能。
多背景
CSS3 允许你使用一个简单的逗号分隔列表,将多个背景应用于某个元素上。这时背景就会堆叠成层，第一个背景位于顶端，最后一个背景处于底部。注意只有列表中的最后一个背景色可以显示出来。
这里有一个基础的示例:
从上面的例子中可以看出，三个背景已经堆叠。同时为了控制图片的显示，这里又应用了其它的背景属性，如 background-repeat和 background-position。
Background-Clip
你还记得当年你使用 Photoshop创建基于图片的文本的日子吗？自从具有相同功能的CSS3 background-clip新属性的出现，Photoshop 正慢慢淡出人们的视线。
现在你可以使用background-clip属性来剪切基于图片的文本。首先，你需要把图片的 div元素放置在 h1或你想要剪切的文本元素上。现在你就可以使用 background-clip属性剪切基于文本的图片。请确保text-fill-color属性为transparent。
下面的示例展示了background-clip属性的工作原理:
CSS 3D 变换
使用 CSS3，你可以创建一个假想的 3D 空间。这时元素需要一个视角才可以激活 3D 空间。有两种方式可以实现激活:使用 transform属性和perspective属性值。
transform: perspective(600px);
或者只是使用perspective属性:
perspective: 600px;
效果的实现是由你给定的值来确定的。值越小，越接近于 三维空间的 Z平面。事实证明，示例效果最具有说服力。下面的程序演示了你如何使用transform属性来实现 3D 效果:
计算值
我最喜欢的 CSS3 功能之一就是，使用 calc()函数计算元素的值。就像一个计算器，它可以执行简单的数学计算，如大小、 角度或频率。
请看下面的代码，观察其工作原理。
HTML:
<div class="container">This is the text inside the container!</div>
CSS:
.container {
width: 80%; /* fallback for browsers without support for calc() */
width: calc(100% - 80px);
text-align: center;
margin-top: 20px;
position: absolute;
left: 40px;
border: 1px solid #3b3b3b;
background-color: #1dd046;
padding: 10px;
}
在这个示例中，CSS 创建了一个容器盒子，其与浏览器边缘有一个 40 像素的边缘距离，并填充其余整个窗口。请看下面的图像结果 ︰
混合模式
使用 background-blend-mode属性，你可以使用颜色混合图像。就像在 Photoshop 中，你可以使用不同的颜色效果改变属性(混合模式)如屏幕(screen)，叠加(overlay)、 变暗(darken)、变轻(lighten)、颜色减淡(color-dodge)、颜色加深(color-burn)、强光(hard-light)、柔光(soft-light)、差异(difference)、排斥(exclusion)、色相(hue)、饱和度(saturation)、颜色(color)和亮度(luminosity)。当然，你使用normal属性保留原始值。
下面是一个简单的示例:
请注意，这里我使用了混合模式属性值screen。这将创建图像颜色的混合效果。
text-overflow
CSS3另外一个特点就是可以使用text-overflow属性对溢出容器的文本进行裁剪。
text-overflow有三个可选值:
clip:默认值。裁剪文本。ellipsis:将使用("···")表示裁剪的文本。initial:将属性设置为默认值。
注意text-overflow可以和 overflow属性一起使用，将文本设置为隐藏，滚动或者自适应。你也可以使用white-space:nowrap;来确定文本的布局方式。如下示例所示:
CSS3 动画
之前，你仅能通过Javascript来实现动画效果。现在，即使你不了解Javascript利用CSS3同样可以实现很炫酷的动画效果。
你可以使用下面两种方式来创建一个很酷的动画效果:
transition: 增加对鼠标悬停状态的平稳过渡。@keyframes: 这个可能有点复杂，但是可以创建出一个先进的动画效果。
让我们看看两种方法的工作原理。请看下面的示例:
如果你想更多的了解CSS3动画，请点击这里。
Flexbox
flexbox是 CSS3 的一种布局方式，他的创建是为了加强项的对齐方式、方向以及在容器内的排列顺序。其优点是可以适应于不同大小的屏幕和设备。
灵活的的盒子模型增强了块模型，而无需使用浮动。这意味着容器的边缘不会与其内容发生坍塌现象。
让我们看一个基本的 flexbox 布局:
启用 flexbox布局，你需要将其父元素的display属性设置为flex或者inline-flex。这样所有的子元素就会自动设设置为 flex项。
Flex 方向
你可以通过使用 flex-container和 flex-direction属性设置flex项的方向。
flex-direction有四个可选值:
row:默认值。将flex项的方向设置为从左向右和从上到下。row-reverse:将flex项的方向设置为从右向左。column:将flex项方向设置为垂直。column-reverse:将flex项方向设置为垂直，但是是以相反的方式。
让我们看看下面这个例子.
在上面的例子中，我们将flex-container的 flex-direction属性设置为了 row-reverse ,意味着 flex-items的排列顺序为从右到左。
关于flexbox，有许多相关属性。如果你想要加深对其的了解，可以点击这里。
总结
CSS3 功能提供了惊人的效果,可以让一个元素逐渐从一个样式更改为另一种，并且根据于你的托管可以提高其加载速度。如果你不是一个程序员，对你想要创建一个简单的、 光滑的效果都非常有用。
本文根据@Samuel Norton的《The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：https://speckyboy.com/2016/04/10/css3-features-essential-modern-web-design/。
如需转载，烦请注明出处：http://www.w3cplus.com/css3/css3-features-essential-modern-web-design.html