最新CSS3新增属性汇总

CSS3边框：

• border-radius：CSS3圆角边框。

  • 在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;

• box-shadow ：CSS3边框阴影。

  • 在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;

• border-image ：CSS3边框图片。

  • 通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png-600) 30 30 round;

CSS3背景：

• background-size ：属性规定背景图片的尺寸。

  • 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

• background-origin ：属性规定背景图片的定位区域。

  • 背景图片可以放置于 content-box、padding-box 或 border-box 区域。

• background-clip：规定背景的绘制区域。

CSS3文字效果：

• hanging-punctuation ：规定标点字符是否位于线框之外。

• punctuation-trim：规定是否对标点字符进行修剪。

• text-align-last ：设置如何对齐最后一行或紧挨着强制换行符之前的行。

• text-emphasis：向元素的文本应用重点标记以及重点标记的前景色。

• text-justify ：规定当 text-align 设置为 “justify” 时所使用的对齐方法。

• text-outline：规定文本的轮廓。

• text-overflow ：规定当文本溢出包含元素时发生的事情。

• text-shadow ：向文本添加阴影。

• text-wrap ：规定文本的换行规则。

• word-break ：规定非中日韩文本的换行规则。

• word-wrap ：允许对长的不可分割的单词进行分割并换行到下一行。

CSS3 转换：

• transform 向元素应用 2D 或 3D 转换。

• transform-origin 允许你改变被转换元素的位置。

• transform-style 规定被嵌套元素如何在 3D 空间中显示。

• perspective 规定 3D 元素的透视效果。

• perspective-origin 规定 3D 元素的底部位置。

• backface-visibility 定义元素在不面对屏幕时是否可见。

CSS3 过渡：

当元素从一种样式变换为另一种样式时为元素添加效果。

• transition：简写属性，用于在一个属性中设置四个过渡属性。

• transition-property：规定应用过渡的 CSS 属性的名称。

• transition-duration ：定义过渡效果花费的时间。默认是 0。

• transition-timing-function ：规定过渡效果的时间曲线。默认是 “ease”。

• transition-delay：规定过渡效果何时开始。默认是 0。

CSS3动画：

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

• @keyframes ：规定动画。

• animation ：所有动画属性的简写属性，除了 animation-play-state 属性。

• animation-name ：规定 @keyframes 动画的名称。

• animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

• animation-timing-function：规定动画的速度曲线。默认是 “ease”。

• animation-delay ：规定动画何时开始。默认是 0。

• animation-iteration-count ：规定动画被播放的次数。默认是 1。

• animation-direction ：规定动画是否在下一周期逆向地播放。默认是 “normal”。

• animation-play-state ：规定动画是否正在运行或暂停。默认是 “running”。

• animation-fill-mode ：规定对象动画时间之外的状态。

CSS3多列：

• column-count ：指定元素应该被分割的列数。

• column-fill ：指定如何填充列

• column-gap ：指定列与列之间的间隙

• column-rule ： 所有 column-rule-* 属性的简写

• column-rule-color ：指定两列间边框的颜色

• column-rule-style ：指定两列间边框的样式

• column-rule-width ：指定两列间边框的厚度

• column-span ：指定元素要跨越多少列

• column-width ：指定列的宽度

• columns ：设置 column-width 和 column-count 的简写

CSS3用户界面：

• resize ：属性规定是否可由用户调整元素尺寸。

• box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。

• outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

• appearance ：允许您使一个元素的外观像一个标准的用户界面元素。

• icon ：为创作者提供了将元素设置为图标等价物的能力。

• nav-down ：指定在何处使用箭头向下导航键时进行导航。

• nav-index ：指定一个元素的Tab的顺序。

• nav-left ：指定在何处使用左侧的箭头导航键进行导航。

• nav-right ：指定在何处使用右侧的箭头导航键进行导航。

• nav-up ：指定在何处使用箭头向上导航键时进行导航。

CSS3 mix-blend-mode

其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

我个人对混合模式的理解也十分浅显，本文只是带领大家走进 CSS 混合模式的世界，初浅的了解混合模式及尝试使用它制作一些效果。

mix-blend-mode 概述

上文也说了，mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。

• mix-blend-mode: normal; // 正常

• mix-blend-mode: multiply; // 正片叠底

• mix-blend-mode: screen; // 滤色

• mix-blend-mode: overlay; // 叠加

• mix-blend-mode: darken; // 变暗

• mix-blend-mode: lighten; // 变亮

• mix-blend-mode: color-dodge; // 颜色减淡

• mix-blend-mode: color-burn; // 颜色加深

• mix-blend-mode: hard-light; // 强光

• mix-blend-mode: soft-light; // 柔光

• mix-blend-mode: difference; // 差值

• mix-blend-mode: exclusion; // 排除

• mix-blend-mode: hue; // 色相

• mix-blend-mode: saturation; // 饱和度

• mix-blend-mode: color; // 颜色

• mix-blend-mode: luminosity; // 亮度

• mix-blend-mode: initial;

• mix-blend-mode: inherit;

• mix-blend-mode: unset;