Css3最新特性总结

Posted 2021-01-17 pingguonjb

Css3最新特性总结

1、  css3新特性

参照资源：http://www.w3school.com.cn/css3/css3_border.asp总结

1）  边框

border-radius

box-shadow

border-image

 

2）  背景

属性	描述	注意事项
background-clip
background-origin
background-size

 

3）  文本效果

属性	描述	注意事项
text-overflow	规定文本溢出时，效果
text-shadow	文本阴影

 

4）  字体

@font-face，css3之前，web必须使用计算机上安装的字体

通过css3，可以将字体放在web服务器上，需要时，会自动下载到用户计算机上。此特性通过@font-face实现。实例如下：

 

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

 

<style>

@font-face

{

font-family: myFirstFont;

src: url(‘Sansation_Light.ttf‘),

     url(‘Sansation_Light.eot‘); /* IE9+ */

}

 

div

{

font-family:myFirstFont;

}

</style>

 

5）  2D转换

通过css3转换，可以进行移动、缩放、转动、拉长、拉伸

2D Transform 方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。

translate()方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

实例

div

{

transform: translate(50px,100px);

-ms-transform: translate(50px,100px);         /* IE 9 */

-webkit-transform: translate(50px,100px);     /* Safari and Chrome */

-o-transform: translate(50px,100px);          /* Opera */

-moz-transform: translate(50px,100px);        /* Firefox */

}

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

实例

div

{

transform: rotate(30deg);

-ms-transform: rotate(30deg);         /* IE 9 */

-webkit-transform: rotate(30deg);     /* Safari and Chrome */

-o-transform: rotate(30deg);          /* Opera */

-moz-transform: rotate(30deg);        /* Firefox */

}

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

实例

div

{

transform: scale(2,4);

-ms-transform: scale(2,4);     /* IE 9 */

-webkit-transform: scale(2,4); /* Safari 和 Chrome */

-o-transform: scale(2,4);      /* Opera */

-moz-transform: scale(2,4);    /* Firefox */

}

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

实例

div

{

transform: skew(30deg,20deg);

-ms-transform: skew(30deg,20deg);     /* IE 9 */

-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

-o-transform: skew(30deg,20deg);      /* Opera */

-moz-transform: skew(30deg,20deg);    /* Firefox */

}

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

实例

如何使用 matrix 方法将 div 元素旋转 30 度：

div

{

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 */

-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* Firefox */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);  /* Safari and Chrome */

-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);               /* Opera */

}

新的转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

 

6）  3D转换

IE10、 firefox支持3D转换

Chrome、safari需要前缀-webkit-

Opera不支持3D转换，只支持2D转换

转换属性

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
backface-visibility	定义元素在不面对屏幕时是否可见。

 

 

3D Transform 方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

 

7）  过渡

Css3允许我们在不使用flash动画或者js的情况下，使一种样式变换成另一种样式

IE10、firefox、chrome、opera都支持transition属性

Safari需要前缀-webkit-

IE9以及之前的版本不支持transition属性

Chrome25以及更早版本需要前缀-webkit-

 

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

 

8）  动画

在css3中使用@keyframes规则创建动画。

Ie10 firefox opera支持@keyframes规则和animation属性

Chrome、safari需要前缀-webkit-

IE9以及更早版本不支持@keyframe规则和animation属性

 

在通过@keyframes创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果

通过规定至少一下两项css3动画属性，即可将动画绑定到选择器

1）  规定动画的名称

2）  规定动画的时长

实例

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s;    /* Firefox */

-webkit-animation: myfirst 5s; /* Safari 和 Chrome */

-o-animation: myfirst 5s;      /* Opera */

}

 

css3动画属性

下表列出了@keyframes规则和所有动画属性

属性	描述
@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	规定对象动画时间之外的状态。

 

9）  多列

通过CSS3能够创建类似报纸的多列布局

IE10 opera支持多列属性

Firefox需要前缀-moz-

Chrome和safari需要前缀-webkit-

Ie9以及更早版本不支持多列属性

新的多列属性

下表列出了所有的多列转换属性

属性	描述
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 的简写属性

 

10）  用户界面

box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C，后者为IE盒子模型。

Outline与border属性的区别：outline不占空间

background-origin决定绘制起点，background-clip决定开始显示的位置（决定是否显示）