边框的css过渡效果答案

【问题标题】：css transition effect for border边框的css过渡效果
【发布时间】：2013-08-22 04:12:25
【问题描述】：

大家好，我在这里使用 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

【问题讨论】：

标签： css

【解决方案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);
 }

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

Mozilla 对此有一个未解决的错误。

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

-您不会看到虚线边框。

【讨论】：