旋转边框 - 质量差

Question

我有一个带有半个边框的圆形元素，当它悬停时，边框动画覆盖整个圆。

我的问题是边框质量差，像素化。有什么办法可以解决这个问题？

我用 CSS 完成了这一切，使用以下代码：

.circle {
    border-radius: 50%;
    position: relative;
    -webkit-box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.69);
    -moz-box-shadow:    3px 2px 5px 0px rgba(50, 50, 50, 0.69);
    box-shadow:         3px 2px 5px 0px rgba(50, 50, 50, 0.69);
    height: 180px;
    width: 180px;
    margin: 9px auto;
    cursor: pointer;
}

.arc_q {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border-width: 7px;
    border-style: solid;
    border-image: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);

}

.arc_q_2 {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);

}
.arc_q_3 {
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    transition: all 400ms;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.arc_q_4 {
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    transition: all 400ms;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


.circle:hover .arc_q_3 {
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    transform: rotate(-225deg);


}
.circle:hover .arc_q_4 {
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);

}

#circle_1 .arc_q {
    border-color: #e01f25 transparent transparent transparent;
}

#circle_1 .circle {
    background-image: url('images/adegamae_logo.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    background-size: 80px;
}

Answer 1

AlexG 的 fiddle 可以进一步简化，方法是让每个 div 占据半个圆，只需要两个弧 div 加上一个隐藏元素。考虑使用：

border-color: #e01f25 transparent transparent #e01f25;

而不是

border-color: #e01f25 transparent transparent transparent;

请参阅以下 fiddle 示例：https://jsfiddle.net/38d47ag0/

可能还需要注意的是，我只是在转换 transform 属性，因为这是唯一发生变化的。

旋转边框 - 质量差

Rotate border - bad quality

html

css

border