用css3轉換輪廓顏色的可能性

Question

用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/

這只是改變立即輪廓..

感謝

Answer 1

如果你想申請多個不同的過渡，你必須將它們合併成一個規則（加上必要的前綴重複它們）：

-webkit-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out; 
    -moz-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out; 
    -o-transition: color 2s, outline-color .7s ease-out, background-color .7s ease-out; 
     transition: color 2s, outline-color .7s ease-out, 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 */