标签：计算机 lsp name pac 矩阵 css 否则 参数 暂停
Css3最新特性总结
1、 css3新特性
参照资源：http://www.w3school.com.cn/css3/css3_border.asp总结
1） 边框
border-radius
box-shadow
border-image
2） 背景
|
属性 |
描述 |
注意事项 |
|
|
|
|
|
|
|
|
|
|
|
3） 文本效果
|
属性 |
描述 |
注意事项 |
|
规定文本溢出时，效果 |
|
|
|
文本阴影 |
|
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() 方法，元素的尺寸会增加或减少，根据给定的宽度（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() 方法，元素翻转给定的角度，根据给定的水平线（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() 方法把所有 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 */
}
新的转换属性
|
属性 |
描述 |
|
向元素应用 2D 或 3D 转换。 |
|
|
允许你改变被转换元素的位置。 |
6） 3D转换
IE10、 firefox支持3D转换
Chrome、safari需要前缀-webkit-
Opera不支持3D转换，只支持2D转换
转换属性
|
属性 |
描述 |
|
向元素应用 2D 或 3D 转换。 |
|
|
允许你改变被转换元素的位置。 |
|
|
规定被嵌套元素如何在 3D 空间中显示。 |
|
|
定义元素在不面对屏幕时是否可见。 |
|
函数 |
描述 |
|
matrix3d(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-
|
属性 |
描述 |
|
简写属性，用于在一个属性中设置四个过渡属性。 |
|
|
规定应用过渡的 CSS 属性的名称。 |
|
|
定义过渡效果花费的时间。默认是 0。 |
|
|
规定过渡效果的时间曲线。默认是 "ease"。 |
|
|
规定过渡效果何时开始。默认是 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规则和所有动画属性
|
属性 |
描述 |
|
规定动画。 |
|
|
所有动画属性的简写属性，除了 animation-play-state 属性。 |
|
|
规定 @keyframes 动画的名称。 |
|
|
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
|
|
规定动画的速度曲线。默认是 "ease"。 |
|
|
规定动画何时开始。默认是 0。 |
|
|
规定动画被播放的次数。默认是 1 |
|
|
规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
|
|
规定动画是否正在运行或暂停。默认是 "running"。 |
|
|
规定对象动画时间之外的状态。 |
9） 多列
通过CSS3能够创建类似报纸的多列布局
IE10 opera支持多列属性
Firefox需要前缀-moz-
Chrome和safari需要前缀-webkit-
Ie9以及更早版本不支持多列属性
新的多列属性
下表列出了所有的多列转换属性
|
属性 |
描述 |
|
规定元素应该被分隔的列数。 |
|
|
规定如何填充列。 |
|
|
规定列之间的间隔。 |
|
|
设置所有 column-rule-* 属性的简写属性。 |
|
|
规定列之间规则的颜色。 |
|
|
规定列之间规则的样式 |
|
|
规定列之间规则的宽度。 |
|
|
规定元素应该横跨的列数。 |
|
|
规定列的宽度。 |
|
|
规定设置 column-width 和 column-count 的简写属性 |
10） 用户界面
box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C，后者为IE盒子模型。
Outline与border属性的区别：outline不占空间
background-origin决定绘制起点，background-clip决定开始显示的位置（决定是否显示）
标签：计算机 lsp name pac 矩阵 css 否则 参数 暂停
原文地址：https://www.cnblogs.com/pingguonjb/p/9909382.html
