今天写了一个边框的过渡，本来是想测试过渡延时的一个性质，结果发现边框在过渡的过程中不按套路出牌。
代码：
<style type="text/css"> * { margin: 0; padding: 0; } .box1 { width: 800px; height: 800px; background-color: silver; } .box2 { width: 200px; height: 200px; border: none; background-color: pink; transition-property: border; transition-duration: 5s; transition-delay: 1s; } div.box1:hover .box2 { /* background-color: blue; */ border: 5px dashed black; } </style> </head> <BODY> <div class="box1"> <div class="box2"></div> </div> </BODY>
过渡过程：
边框由 none 过渡到 5px dashed black
现象：
正向过渡：延迟一秒之后，在5s内变成5px dashed black。没有问题
反向过渡：当鼠标移出银色div后，发现边框直接消失，并没有想象中的从5px dashed black 渐渐地过渡到 none 的现象。
其他（终止反向过渡）：当鼠标移出银色div后，然后在较短的时间中（小于6s）再次移入银色div，发现从none 到 5px dashed black 的过渡时间小于5s。
原因：
反向过渡时，由于边框简写属性中包含了border-style属性，而这个属性是不支持过渡的，所以在鼠标移出银色div后，边框样式直接由dashed 变为 none，所以才造成反向过渡失败的现象（因为边框直接变成none，故也看不见border-width和border-color的过渡效果）；
知道上面的原因之后，终止反向过渡时出现的现象也不难理解了，因为在较短时间内移入银色div时，反向过渡过程还未结束，所以这时正向过渡是从反向过渡的一个中间状态开始的，而不是从正向过渡的初始状态（none）开始。