我使用边框样式在css中创建了一个半圆。为了制作圆圈，我给了边框左右两边的颜色透明，它在chrome中工作得很好但是在Firefox中只有一些线条在圆圈里面。有人对此有任何想法吗？
这里的链接 codepen.io/imarun/pen/ggOdoN
body {
font-family: 'Roboto', sans-serif;
font-size: 64px;
}
.outer {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
}
.outer p {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 100px;
background: antiquewhite;
border-radius: 10%;
}
.outer p:hover .round:before {
-webkit-transform: rotate(225deg) scale(0.5) translate(-10px, -10px);
transform: rotate(225deg) scale(0.5) translate(-10px, -10px);
box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.9);
}
.outer p:hover .round:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.outer p:hover .dots:before,
.outer p:hover .dots:after {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.round {
position: absolute;
width: 50px;
height: 50px;
left: 80px;
top: 24px;
border-radius: 50%;
border: 1px solid black;
border-right-color: transparent;
z-index: 100;
}
.round:before {
position: absolute;
content: "";
display: block;
border: 25px solid grey;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotate(45deg) scale(1) translate(0, 0);
transform: rotate(45deg) scale(1) translate(0, 0);
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
top: 0;
border-radius: 50%;
z-index: 90;
}
.round:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: -1px;
left: -1px;
border-radius: 50%;
border: 1px solid transparent;
border-right-color: black;
z-index: 99;
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.round .dots {
position: absolute;
width: 100%;
height: 100%;
}
.round .dots:before,
.round .dots:after {
position: absolute;
content: "";
top: 35%;
left: 25%;
width: 5px;
height: 5px;
background: black;
border-radius: 50%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transition: -webkit-transform 0.3s 0.7s ease;
transition: -webkit-transform 0.3s 0.7s ease;
transition: transform 0.3s 0.7s ease;
transition: transform 0.3s 0.7s ease, -webkit-transform 0.3s 0.7s ease;
}
.round .dots:after {
right: 25%;
left: auto;
}
.round.round1 {
left: 140px;
}<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
</style>
</head>
<div class="outer">
<p>FR
<span class="round">
<span class="dots"></span>
</span>
<span class="round round1">
<span class="dots"></span>
</span>
</p>
</div>
<!-- <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="285.333px" height="286.667px" viewBox="0 0 285.333 286.667" enable-background="new 0 0 285.333 286.667"
xml:space="preserve">
<style>
svg *{
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
svg:hover .cutpart{
transform: translate(62px);
}
</style>
<g>
<path fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M281.258,142.812
c0-76.62-62.113-138.732-138.732-138.732S3.793,66.192,3.793,142.812s62.113,138.732,138.732,138.732
c31.112,0,59.832-10.241,82.972-27.536"/>
<path class="cutpart" fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M225.498,254.008
c24.46-18.281,42.687-44.444,50.916-74.724c3.158-11.622,4.844-23.85,4.844-36.472"/>
<circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="89.147" cy="94.967" r="10.058"/>
<circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="197.147" cy="94.967" r="10.058"/>
<path fill="#2375AD" stroke="#3FA9F5" stroke-miterlimit="10" d="M68.765,164.833c0,41,33.024,73.761,73.761,73.761
c40.737,0,73.761-32.761,73.761-73.761H68.765z"/>
<path fill="#144F70" d="M81.765,170.833c0,33,27.203,60.761,60.761,60.761c33.557,0,60.761-27.761,60.761-60.761H81.765z"/>
</g>
</svg> -->
答案 0 :(得分：1)
如果您简化了创建这些“e”标志的方式，那么您将无法解决这些问题
附注：您在原始代码中遇到的问题与您在border的伪规则.round上设置&:before的方式相同。例如，如果你给它一个红色背景，那些白线变成红色，所以我想这是一个消除锯齿的问题。
我通过使用背景颜色解决了这个问题，结合了左上角和右上角的圆角
.outer p {
font-size: 64px;
margin: 0;
}
.outer p > span {
position: relative;
display: inline-block;
top: 2px;
width: 50px;
height: 50px;
}
.outer p > span + span {
margin-left: 7px;
}
.outer p > span::after {
content: '';
position: absolute;
left: 0; top: 0;
height: 50%;
width: 100%;
border: 1px solid black;
border-width: 1px 1px 0 1px;
background: gray;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
transition: transform 0.5s;
transform-origin: center bottom;
}
.outer p > span::before {
content: '';
position: absolute;
left: 0; top: 0;
height: 100%;
width: 100%;
border: 1px solid black;
border-right-color: transparent;
border-radius: 50%;
transform: rotate(10deg);
transition: border-color 0.5s;
}
.outer p > span span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.outer p > span span::before,
.outer p > span span::after {
content: '';
position: absolute;
left: 15px; top: 15px;
width: 5px;
height: 5px;
background: gray;
border-radius: 50%;
transform: scaleY(0);
transition: transform 0.2s 0.3s;
}
.outer p > span span::after {
left: 30px;
}
.outer p:hover > span::before {
border-right-color: black;
}
.outer p:hover > span::after {
color: black;
transform: translateY(10%) scale(0.6) rotate(180deg);
}
.outer p:hover > span span::before,
.outer p:hover > span span::after {
transform: scaleY(1);
}<div class="outer">
<p>FR<span><span></span></span><span><span></span></span>
</p>
</div>