css3新增属性有哪些（CSS3新增属性一览）

CSS3新增属性一览 CSS是网页设计中不可或缺的关键性代码，而CSS3则是其不断发展升级的最新版本。CSS3相比于以往版本，有着更多的新增属性可供使用。在这篇文章中我们将会讨论CSS3新增的属性，以帮助你更好地运用这些属性为你的网页呈现更加美丽的样式。第一段：背景属性的新增背景属性在CSS中一直扮演着非常重要的角色，而随着CSS3的发展，背景属性也有了不少的新增加强。下面我们来看一下几个比较常用的背景属性新增：

背景图像与CSS3

background-clip。这个属性决定了背景图像是否延伸到元素的边框下，也就是让背景图像是否在边框之下呈现。它可取的值为：border-box（默认值）、padding-box 和content-box。 background-origin。这个属性设置了背景图片的起始位置，它可取的值为：padding-box（默认值）、border-box 和 content-box 。 background-size。这个属性能够调整背景图像的大小，它可取的值包括百分比、长度和cover和contain。其中cover会缩放背景图像，使其适应元素的大小，但不能使其拉伸变形，而contain则会调整背景图像的大小，使其可以完整的呈现在元素中。第二段：变形属性的新增从CSS3起，变形属性如灵丹妙药一般地为前端设计师带来了诸多便利。变形属性的新增，让前端设计师更加自由地创造出吸引眼球的效果。下面我们来看一下几个比较常用的变形属性新增：

CSS3动画之变形

transform-origin。这个属性可以设置一个固定点，用于定位元素变形的起始点位置。这个固定点是元素本身的左上角（0% 0%）点，也可以设置为右上角（100% 0%）点，左下角（0% 100%）点，右下角（100% 100%）点，或者元素中心点（50% 50%）。 transform-style。这个属性可以用来设置一个三维元素在变换过程中，是否在自己的三维空间内保持平整。值为 flat（默认值）和preserve-3d。第三段：动画属性的新增 CSS3 的动画效果可以为网页带来令人印象深刻的效果，从而提升用户体验。下面我们来看一下CSS3动画的新增属性：

CSS3动画之进入动画

animation-iteration-count。这个属性确定动画应该播放几次，可以使用数字或者infinite，其中infinite代表无限次的播放。 animation-direction。这个属性定义动画的播放方向，它可包括 alternate、reverse、alternate-reverse 和normal，默认值为 normal。 animation-timing-function。可以让你设置播放速度随时间变化的速率和的动态变化曲线。你可以在延迟、整个周期或单个关键帧的时候有更精确的控制。常用的值为 ease（默认）和linear。总结本文介绍了CSS3新增的一些属性，其中背景属性、变形属性和动画属性是使用较多的。对于前端设计师而言，熟练掌握这些新增属性，可以更好地为网页解决问题，创造出更加优雅、美丽的网页效果。