css新特性有哪些（详细介绍css的9大新特性）

1、透明度

rgba和opacity都可以设置透明的。

rgba(red, green, blue, alpha)：alpha是0-1透明度，0时颜色为完全透明，1是完全不透明。

opacity:index：index是0-1，设置整个元素的透明度。

两者区别：rgba是设置元素的字体或背景颜色加了透明度，其他样式不受影响，opacity是影响整个元素包含其子元素都会设置透明度。

2、圆角

border-radius：为元素添加圆角边框，border-radius可以简写也可以分别设置。与margin设置类似，可以设置一个值(表示四个圆角)、两个值(第一个是左上角右下角，第二个值是右上角左下角)、三个值（第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角）。

border-radius: 10px;
/* 等价于 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

3、背景图片

新增背景图片设置可以简写，也可以分开单独设置。新增属性及意义：

• background-image /*设置背景图路径(相对和绝对路径)*/
• background-repeat /*背景图是否重复，repeat-x水平方向重复；repeat-y垂直方向重复；no-repeat不重复；默认情况下两个方向都重复*/
• background-position /*背景图对齐方式，默认是左上角;(100% 0)right top设置到右上角；(100% 100%)right bottom设置到右下角；(0 100%)left bottom设置到左下角；0 0（left top）设置到左上角；center center 水平和垂直方向都居中 */
• background-attachment /*背景图是固定还是滚动。fixed固定背景图；scroll跟随页面滚动*/
• background-size 背景图片的尺寸。
• backgroun-origin 规定background-position属性相对于什么位置来定位。
• background-clip 规定背景的绘制区域。

4、阴影

box-shadow：给元素添加阴影。

语法：box-shadow:水平偏移 垂直偏移 [ 模糊半径 阴影尺寸 阴影颜色 inset(内部阴影) ]

text-shadow：给文字加阴影。

语法：text-shadow:水平偏移 垂直偏移 [ 模糊半径 阴影尺寸 阴影颜色 inset(内部阴影) ]

5、渐变

渐变有两种：线性渐变和径向渐变。

线性渐变：从某个方向或角度开始定义渐变

线性渐变语法(使用方向)：background-image: linear-gradient(direction, color-stop1, color-stop2, …);

direction不设置的时候默认从上到下，可以设置的方向属性值有to bottom、to top、to right、to left、to bottom right。

线性渐变语法(使用角度)：background-image: linear-gradient(angle, color-stop1, color-stop2, …);

angle角度设置时 数字加deg。

径向渐变：从中心开始定义渐变

径向渐变语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);

6、转换

css3的转换可以对元素进行伸缩、缩放、旋转、移动等。转换可分为2D转换和3D转换。

2D转换有scale(缩放)、rotate(旋转)、translate(移动)、skew(沿x或y轴旋转)、matrix简写各种2D转换。

• translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
• translateX(n)：指定元素在X轴中的位移。
• translateY(n)：指定元素在Y轴中的位移。
• scaleX(n)：定义 X 轴方向的缩放转换。
• scaleY(n)：定义 Y 轴方向的缩放转换
• skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。
• skewX(angle)：定义沿着 X 轴的 2D 倾斜转换。
• skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

实例: 利用matrix()方法旋转div元素30°
transform : matrix( 0.866 , 0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
3D转换

3D转换

• translated3d(x,y,z):指定元素在三维空间的位移。
• translatedX(x) ：指定元素在x轴中的位移。
• translatedY(y) ：指定元素在y轴中的位移。
• translatedZ(z) ：指定元素在z轴中的位移。
• scale3d(x,y,z)：定义 3D 缩放转换。
• scaleX(x)：通过设置 X 轴的值来定义缩放转换。
• scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
• scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。
• rotate3d(x,y,z,angle)：定义 3D 旋转。
• rotateX(x)：定义沿着 X 轴的 3D 旋转。
• rotateY(y)：定义沿着 Y 轴的 3D 旋转。
• rotateZ(z)：定义沿着 Z 轴的 3D 旋转。

7、过渡

transition ：设置元素要过渡的效果，总共有四个属性，可简写。

• transition-property：规定应用过渡的 CSS 属性的名称。
• transition-duration：定义过渡效果花费的时间。默认是 0。
• transition-timing-function ：规定过渡效果的时间曲线。默认是 “ease”。
• transition-delay：规定过渡效果何时开始。默认是 0。

可简写为：

transition: property duration timing-function delay;

8、动画

animate：为元素添加动画，是一个简写属性。也可以拆分设置。

• animation-name：规定动画名称
• animation-duration：规定一个动画周期所花费的时长ms或s为单位。
• animation-timing-function：规定动画的速度曲线。
• animation-fill-mode：规定动画不播放时的元素样式。
• animation-delay：规定动画延迟多久执行。
• animation-iteration-count：动画播放次数。
• animation-direction：规定动画下一期是否逆向播放。
• animation-paly-state：动画运行状态。

可简写为：

animation: name duration timing-function delay iteration-count paly-state;

9、文本效果

word-break：定义如何换行。属性值有normal(浏览器默认换行规则)、break-all(允许在单词内换行)、keep-all(只能在半角空格或连字符处换行)。

word-wrap：允许长的内容可以自动换行。属性值有normal，break-word。

text-overflow ：指定文本溢出包含他的元素，应该发生什么。属性值有clip(修剪文本)、ellipsis(显示省略号)、string(给定的字符串来代表被修剪的文本)。