Question

大家都在使用css3过渡效果，我试图将它用于边框样式我的css

.round{
    width:50px;
    height:50px;
    border-radius:50px;
    border:5px solid #ccc;
    cursor:pointer;
    background-color:#f00;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition:all 0.5s ease 0s
}
.round:hover{
    border-style:dotted;
    border-color:#666;
    background-color:#ccc;
}

在悬停圆形时，我需要更改边框样式，但它不能在moz浏览器中工作，我需要通过旋转方式更改边框样式。

这是我的fiddle

Answer 1

这就是你想要实现的目标http://jsfiddle.net/herzb/27/

border-style:dotted;
border-color:#666;
background-color:#ccc;
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg); 
  -ms-transform: rotate(360deg);
   -o-transform: rotate(360deg); 
      transform: rotate(360deg);
 }

Answer 2

Mozilla有一个开放的bug。

Dotted/dashed border-radiused corners are rendered as solid

请注意，如果删除border-radius属性，则转换有效。

所以它与转换无关，而是firefox无法显示虚线圆边框。

证明：在Firefox中查看this fiddle。

.round{
    width:50px;
    height:50px;
    border-radius:50px;
    border:5px dotted #ccc;
    margin:45px auto;
    cursor:pointer;
    background-color:#f00;
}

- 你不会看到虚线边框。

Answer 3

你不能这样做。 除非使用一些边框图像技巧。

你使用了一个border-radius，这使得这些点非常接近，不再可见了。

Example with a smaller radius

.round{
    width:50px;
    height:50px;
    border-radius:20px;
    border:5px solid #ccc;
    margin:45px auto;
    cursor:pointer;
    background-color:#f00;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
.round:hover{
    border: 5px dotted #666 !important;
    background-color:#ccc;
}

边界的css过渡效果

3 个答案: