html中下边框过渡效果,css3 参与背景过度的属性有哪些（transition-凯发k8官方网

css3 新增了背景或元素运动过度效果属性 transition，其中有一个取值为过渡实体 transition-property，也就是设置什么参与过渡，有多个实体可供选择，如常用背景颜色(background-color)、背景图象(background-image)、字体颜色(color)等。

为便于选择不同的属性作为过渡实体，以下将在文章最后列出所有可以参与过渡的属性。下面先看 transition-property 的语法规则，再看在网页设计中具体使用实例。

一、transition-property语法规则

transition-property：[, * ]

= none | all |

二、语法说明

1、transition-property 可以设置多组值，默认值为 all

a、 表示第一组参与过渡的属性，不能省略；

b、[]中的 表示第二组参与过渡的属性，可以省略；

c、* 表示第三组、第四组、……第n组参与过渡的属性，可以省略；

2、 取值分别如下：

a、none：表示不设置参与过渡的属性；

b、all：表示所有可以参与过渡的css属性，具体见文章后面；

c、：指定参与过渡的css属性 ；

三、transition-property 多组过渡效果实例

html代码：

• 过度属性为：背景颜色transition-property:background-color;
• 过度属性为：边框颜色和宽度transition-property:border-color,border-width;
• 过度属性为：字体颜色transition-property:color;
• 过度属性为：字体大小transition-property:font-size;
• 过度属性为：阴影transition-property:text-shadow;

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);}

效果图：

过度属性为：背景颜色

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

总结

以上是凯发k8官方网为你收集整理的html中下边框过渡效果,css3 参与背景过度的属性有哪些（transition-property语法规则及多组过渡效果实例）...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。