Question

是否可以淡化元素的边框？为了澄清，这需要从javascript触发，并且使用像jquery这样的动画不是一种选择。我们正在使用sencha，但看起来你不能使用extjs为元素大小和位置设置任何动画。我知道css3有一些方便的动画，但我找不到类似于我需要的东西。

Answer 1

这样的东西？

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/

演示

Answer 2

请记住，如果只写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/

这在Opera 12中得到修复。

Answer 3

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

淡化css边框看不见？

3 个答案: