HTML5基础加强css新闻网页,HTML5基础加强css样式篇（css过度覆盖问题）（二十一）...

1.css属性过度覆盖问题：

.box1, .box2 {

width: 100px;

height: 100px;

background-color: blue;

}

body:hover .box1{

width: 300px;

height: 300px;

/*transition: 具有过渡效果的样式 持续时间 过渡效果 延迟时间, 具有过渡效果的样式 持续时间 过渡效果 延迟时间;*/

/*

默认: 逗号后的相同CSS名设置的过渡样式，会覆盖前面的过渡样式

*/

transition:width 3s, width 1s -1s;

/*

特殊情况：逗号后的相同CSS名设置的过渡样式，过渡时间为零，使用前面的过渡样式。

过渡时间为零的两种情况

- 使用负延迟时间抵消 transition:width 3s, all 1s -1s;

- 显示设置0 transition:width 3s, all 0s;

*/

/*transition:width 3s, width 1s -1s;*/

transition:width 3s, width 0s;

}