將css邊框淡入淡出？

是否可以淡化元素的邊框？爲了澄清，這需要從JavaScript觸發，並使用像jQuery的動畫不是一個選項。我們正在使用sencha，但它看起來並不像您可以使用extjs製作元素的大小和位置。我知道css3有一些方便的動畫，但我找不到任何類似於我的需求的東西。將css邊框淡入淡出？

來源

2011-10-12 CDelaney

想你可以編寫自己的補間函數的收縮幅度爲0和褪色的顏色透明，如果沒有別的。 –

像這樣的事情？

div.transition { 
    border: 5px solid rgba(0,0,0,1); 
    height: 100px; 
    width: 100px; 
    background-color: #ffffff; 

    -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */ 
    -moz-transition: border-color 1s linear; /* FF3.7+ */ 
     -o-transition: border-color 1s linear; /* Opera 10.5 */ 
      transition: border-color 1s linear; 
} 

div.transition:hover { 
    border-color: rgba(0,0,0,0); 
}

演示在http://jsfiddle.net/gaby/bcn5c/1/

來源

2011-10-12 19:01:47

用於淡出：懸停狀態'border-color'應該是'transparent'或父元素的背景顏色。 – JKirchartz

另外，雖然使用CSS3的作品，請記住，這是不兼容的某些瀏覽器 - 咳嗽 - IE瀏覽器。 – Ben

@JKirchartz，通過'rgba'設置不透明度爲0與透明度相同..雖然它仍然顯示相同的div背景，而不是下面的元素..（*使用下面元素的顏色工作，但不是如果下面的元素不是一個純色.. *） –

只使用CSS3過渡

#id_of_element { 
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
}

來源

2011-10-12 19:01:46 Tules

請記住，轉變不會在歌劇（11.62）的工作，如果你只寫border-color。你必須分別指定所有四個邊框：

-o-transition: border-top-color 1s linear, border-right-color 1s linear, border-bottom-color 1s linear, border-left-color 1s linear;

http://jsfiddle.net/ds5bM/

這是固定在Opera 12

來源

2012-04-19 12:45:23 sabel

將css邊框淡入淡出？

回答

相關問題