CSS3变换入门（4）

作者：神飞　来源：前端观察　发布时间：2010-01-30 13:29:00　

标签：css3,变换,入门,dhtml

添加多重变换

因为一个变换就是一个CSS属性，如果你在同一个CSS规则中添加多个变换的实例，那么最后的那个将会覆盖前面的，而不是添加它们。所以在下面的规则中，唯一的变换将是背景色彩：

a:hover {
color: red;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1;
}

当然，这并不是说，不能添加多重变换——多重变换可以在同一个变换属性定义中用逗号隔开：

a:hover {
color: red;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}

这条定义将产生色彩和背景色的双重变换。

什么可以被变换？

几乎所有的有色彩、大小或位置等组件的CSS属性，包括许多新添加的CSS 3属性，都可以应用变换。一个值得注意的例外是box-shadow。

来自W3C的变换的说明，这里是一个可以赋予变换的CSS属性的列表，附带转变的对象，我也高亮了一些比较有用的属性。

CSS属性	改变的对象
background-color	色彩
background-image	只是渐变
background-position	百分比，长度
border-bottom-color	色彩
border-bottom-width	长度
border-color	色彩
border-left-color	色彩
border-left-width	长度
border-right-color	色彩
border-right-width	长度
border-spacing	长度
border-top-color	色彩
border-top-width	长度
border-width	长度
bottom	百分比，长度
color	色彩
crop	百分比
font-size	百分比，长度
font-weight	数字
grid-*	数量
height	百分比，长度
left	百分比，长度
letter-spacing	长度
line-height	百分比，长度，数字
margin-bottom	长度
margin-left	长度
margin-right	长度
margin-top	长度
max-height	百分比，长度
max-width	百分比，长度
min-height	百分比，长度
min-width	百分比，长度
opacity	数字
outline-color	色彩
outline-offset	整数
outline-width	长度
padding-bottom	长度
padding-left	长度
padding-right	长度
padding-top	长度
right	百分比，长度
text-indent	百分比，长度
text-shadow	阴影
top	百分比，长度
vertical-align	百分比，长度，关键词
visibility	可见性
width	百分比，长度
word-spacing	百分比，长度
z-index	正整数
zoom	数字

第一页上一页 1 2 3

5 下一页

投稿

CSS3变换入门（4）

猜你喜欢