html – 可以使用css3过渡轮廓颜色

概述是不是可以用 css3转换大纲？ body{margin:10px;padding:0px;}#tDiv{ background-color:#999; width:500px; height:500px; color:black; outline: 5px dashed #222; -moz-transition: color 2s; 是不是可以用 css3转换大纲？

body{margin:10px;padding:0px;}#tdiv{    background-color:#999;    wIDth:500px;     height:500px;    color:black;   outline: 5px dashed #222;     -moz-Transition: color 2s;    -o-Transition: color 2s;    -webkit-Transition: color 2s;    Transition: color 2s;    -moz-Transition: outline-color .7s ease-out;    -o-Transition: outline-color .7s ease-out;    -webkit-Transition: outline-color .7s ease-out;    Transition: outline-color .7s ease-out;    -moz-Transition: background-color .7s ease-out;    -o-Transition: background-color .7s ease-out;    -webkit-Transition: background-color .7s ease-out;    Transition: outline-background .7s ease-out;   }#tdiv:hover{    color:green;    background-color:gold;    outline: 5px dashed magenta;}

http://jsfiddle.net/loren_hibbard/uKGCc/

这只会立即改变轮廓..

谢谢

解决方法 如果要应用多个不同的转换,则必须将它们合并为一个规则(并使用必要的前缀重复它们)：

-webkit-Transition: color 2s,outline-color .7s ease-out,background-color .7s ease-out;   -moz-Transition: color 2s,background-color .7s ease-out;     -o-Transition: color 2s,background-color .7s ease-out;        Transition: color 2s,background-color .7s ease-out;

示例：http://jsfiddle.net/UF3Ht/6/

https://developer.mozilla.org/en-US/docs/CSS/transition-property

Transition:   [<'Transition-property'> || <'Transition-duration'> || <'Transition-timing-function'> || <'Transition-delay'> [,[<'Transition-property'> || <'Transition-duration'> || <'Transition-timing-function'> || <'Transition-delay'>]]*

当您多次使用同一属性时,只会照常应用最后一个属性：

Transition: outline-color .7s ease-out;    /* this will be overrIDden */Transition: background-color .7s ease-out; /* this will be used */

总结

以上是内存溢出为你收集整理的html – 可以使用css3过渡轮廓颜色全部内容，希望文章能够帮你解决html – 可以使用css3过渡轮廓颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。