CSS3 参与背景过度的属性有哪些（transition-property语法规则及多组过渡效果实例）
CSS3 新增了背景或元素运动过度效果属性 transition，其中有一个取值为过渡实体 transition-property，也就是设置什么参与过渡，有多个实体可供选择，如常用背景颜色（background-color）、背景图象（background-image）、字体颜色（color）等。
为便于选择不同的属性作为过渡实体，以下将在文章最后列出所有可以参与过渡的属性。下面先看 transition-property 的语法规则，再看在网页设计中具体使用实例。
一、transition-property语法规则
transition-property：<single-transition-property>[, <single-transition-property> * ]
<single-transition-property> = none | all | <IDENT>
二、语法说明
1、transition-property 可以设置多组值，默认值为 all
A、<single-transition-property> 表示第一组参与过渡的属性，不能省略；
B、[]中的 <single-transition-property> 表示第二组参与过渡的属性，可以省略；
C、* 表示第三组、第四组、……第n组参与过渡的属性，可以省略；
2、<single-transition-property> 取值分别如下：
A、none：表示不设置参与过渡的属性；
B、all：表示所有可以参与过渡的css属性，具体见文章后面；
C、<IDENT>：指定参与过渡的css属性 ；
三、transition-property 多组过渡效果实例
html代码：
<ul class="transition-property">
<li class="bgcolor">过度属性为：背景颜色transition-property:background-color;</li>
<li class="bdcolor">过度属性为：边框颜色和宽度transition-property:border-color,border-width;</li>
<li class="color">过度属性为：字体颜色transition-property:color;</li>
<li class="fontsize">过度属性为：字体大小transition-property:font-size;</li>
<li class="textshadow">过度属性为：阴影transition-property:text-shadow;</li>
</ul>
CSS代码：
<style type="text/css">
.transition-property{overflow:hidden;margin:0px;padding:0px;list-style:none;}
.transition-property li{width:300px;height:60px;margin-bottom:10px;padding:6px;border:1px solid #ab9595;background-color:#e3e2e0;}
.transition-property li.bgcolor{transition-property:background-color;transition-duration:.5s;transition-timing-function:ease;}
.transition-property li.bdcolor{transition-property:border-color,border-width;transition-duration:.5s;transition-timing-function:ease-in;}
.transition-property li.color{transition-property:color;transition-duration:.6s;transition-timing-function:ease-in-out;}
.transition-property li.fontsize{transition-property:font-size;transition-duration:.5s;transition-timing-function:ease-in;}
.transition-property li.textshadow{transition-property:text-shadow;transition-duration:.6s;transition-timing-function:ease-in-out;}
.transition-property li:nth-child(1):hover{background-color:#ff0030;}
.transition-property li:nth-child(2):hover{border-color:#0042ff; border-width:medium;}
.transition-property li:nth-child(3):hover{color:#b21a06;}
.transition-property li:nth-child(4):hover{font-size:18px;}
.transition-property li:nth-child(5):hover{box-shadow:2px 2px 3px 3px rgba(200, 199, 199, .6);}
</style>
效果图：
-
过度属性为：背景颜色
transition-property:background-color; -
过度属性为：边框颜色和宽度
transition-property:border-color,border-width; -
过度属性为：字体颜色
transition-property:color; -
过度属性为：字体大小
transition-property:font-size; -
过度属性为：阴影
transition-property:text-shadow;
可选为过渡的属性：
- 属性名称类型
- transformall
- background-colorcolor
- background-imageonly gradients
- background-positionpercentage, length
- border-bottom-colorcolor
- border-bottom-widthlength
- border-colorcolor
- border-left-colorcolor
- border-left-widthlength
- border-right-colorcolor
- border-right-widthlength
- border-spacinglength
- border-top-colorcolor
- border-top-widthlength
- border-widthlength
- bottomlength, percentage
- colorcolor
- croprectangle
- font-sizelength, percentage
- font-weightnumber
- grid-*various
- heightlength, percentage
- leftlength, percentage
- letter-spacinglength
- line-heightnumber, length, percentage
- margin-bottomlength
- margin-leftlength
- margin-rightlength
- margin-toplength
- max-heightlength, percentage
- max-widthlength, percentage
- min-heightlength, percentage
- min-widthlength, percentage
- opacitynumber
- outline-colorcolor
- outline-offsetinteger
- outline-widthlength
- padding-bottomlength
- padding-leftlength
- padding-rightlength
- padding-toplength
- rightlength, percentage
- text-indentlength, percentage
- text-shadowshadow
- toplength, percentage
- vertical-alignkeywords, length, percentage
- visibilityvisibility
- widthlength, percentage
- word-spacinglength, percentage
- z-indexinteger
- zoomnumber