可以使用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;
}

这里提供了一个示例代码。

这段代码可以立即更改轮廓线。

谢谢。

​

- 1252748

---

http://jsfiddle.net/UF3Ht/5/ 这个链接里的代码 transition: all ...; 在 Safari 和 Firefox 中似乎工作正常。 - biziclop

@biziclop 它也可以在FF中运行。 - Sven Bieder

@biziclop 太棒了！你能把它提交为答案吗？谢谢！ - 1252748

那不是解决方案，最后一个 -*-transition 规则将被应用，尝试重新排列这些规则。 - biziclop

@biziclop 我不明白你的意思。 - 1252748

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

- biziclop

---

你必须将它们合并成一个规则。 <-- 保存得好伙计，谢谢！ - Brant