CSS3 新增了背景或元素運動過度效果屬性 transition，其中有一個取值為過渡實體 transition-property，也就是設置什么參與過渡，有多個實體可供選擇，如常用背景顏色(background-color)、背景圖象(background-image)、字體顏色(color)等。

為便于選擇不同的屬性作為過渡實體，以下將在文章最后列出所有可以參與過渡的屬性。下面先看 transition-property 的語法規(guī)則，再看在網頁設計中具體使用實例。

一、transition-property語法規(guī)則

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

總結

以上是生活随笔為你收集整理的html中下边框过渡效果,CSS3 参与背景过度的属性有哪些（transition-property语法规则及多组过渡效果实例）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。