将css边框渐变为不可见

Fade a css border to invisible?

本文关键字：渐变 css 边框      更新时间：2023-09-26

是否可以将元素的边框淡出?澄清一下，这需要从javascript触发，而使用jquery之类的东西制作动画是不可行的。我们正在使用sencha，但它看起来不像你可以动画任何东西，除了元素的大小和位置与extjs。我知道css3有一些方便的动画，但我找不到任何类似于我的需要。

是这样的吗?

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/演示

请记住，如果您只写border-color，转换在Opera(11.62)中不起作用。您必须分别指定所有四个边框:

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

使用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;
}
相关文章：