css - 边框的css过渡效果

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 浏览器中不起作用，我需要通过旋转方式更改边框样式。

这是我的小提琴

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 对此有一个开放的错误。

虚线/虚线边框圆角呈现为实心

请注意，如果您删除了 border-radius 属性 - 过渡有效。

所以它真的与过渡无关，而是Firefox无法显示虚线圆形边框。

证明：在 Firefox 中查看这个小提琴。

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

- 你不会看到虚线边框。

Answer 3

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

您使用边界半径，这使点如此接近以至于不再可见。

半径较小的示例

.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;
}