javascript 将css边框淡化为不可见？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7745086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade a css border to invisible?
提问by CDelaney
Is it possible to fade an element's border away? To clarify, this needs to be triggered from javascript, and using something like jquery for animation is NOT an option. We're using sencha but it doesn't look like you can animate anything but element size and position with extjs. I know css3 has some handy animation, but I can't find anything similar to my needs.
是否可以淡化元素的边框？澄清一下，这需要从 javascript 触发，并且使用 jquery 之类的动画不是一种选择。我们正在使用 sencha，但看起来除了使用 extjs 元素大小和位置之外，您无法设置任何动画。我知道 css3 有一些方便的动画，但我找不到与我需要类似的东西。
回答by Gabriele Petrioli
Something like this ?
像这样的东西？
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);
}
回答by sabel
Keep in mind that transitions don't work in Opera (11.62) if you just write border-color. You have to specify all four borders separately:
请记住，如果您只编写border-color. 您必须分别指定所有四个边框：
-o-transition: border-top-color 1s linear, border-right-color 1s linear, border-bottom-color 1s linear, border-left-color 1s linear;
This is fixed in Opera 12.
这在 Opera 12 中已修复。
回答by Tules
just use CSS3 transitions
只需使用 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;
}
