當邊框的左右顏色變得透明時，線條出現在FF中

我使用邊框樣式在css中創建了一個半圈。爲了製作圓圈，我給了左右邊框的顏色透明，並且它在Chrome中運行正常，但是隻有一些線條在Firefox中進入圓圈內部。任何人對此有何想法？當邊框的左右顏色變得透明時，線條出現在FF中

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" 
 
\t width="285.333px" height="286.667px" viewBox="0 0 285.333 286.667" enable-background="new 0 0 285.333 286.667" 
 
\t xml:space="preserve"> 
 

 
\t <style> 
 
\t \t \t svg *{ 
 
\t \t \t -moz-transition:all 0.3s ease-out; 
 
\t \t \t -o-transition:all 0.3s ease-out; 
 
\t \t \t -webkit-transition:all 0.3s ease-out; 
 
\t \t \t \t transition:all 0.3s ease-out; 
 
\t \t \t } 
 

 
\t \t \t svg:hover .cutpart{ 
 
\t \t \t \t transform: translate(62px); 
 
\t \t \t } 
 
\t </style> 
 

 
<g> 
 
\t <path fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M281.258,142.812 
 
\t \t 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 
 
\t \t c31.112,0,59.832-10.241,82.972-27.536"/> 
 
\t <path class="cutpart" fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M225.498,254.008 
 
\t \t c24.46-18.281,42.687-44.444,50.916-74.724c3.158-11.622,4.844-23.85,4.844-36.472"/> 
 
\t <circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="89.147" cy="94.967" r="10.058"/> 
 
\t <circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="197.147" cy="94.967" r="10.058"/> 
 
\t <path fill="#2375AD" stroke="#3FA9F5" stroke-miterlimit="10" d="M68.765,164.833c0,41,33.024,73.761,73.761,73.761 
 
\t \t c40.737,0,73.761-32.761,73.761-73.761H68.765z"/> 
 
\t <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> -->

來源

2017-05-28 Arun

讓我知道，如果我的回答工作，可以接受，否則我刪除它。 – LGSon

它沒有工作@LGSon – Arun

@LGSon請把你的答案，我沒有測試與transfrom旋轉和眼睛裏面...所以把你的答案... :) – Arun

如果您簡化您創建的「E」標誌的方式，你不會得到這些問題

旁註：您在原始代碼中遇到的問題與您在.round的僞規則上設置border的方式相同。例如，如果你給它一個紅色背景，那些白線變成紅色，所以我想這是一個反鋸齒問題。

我解決了使用的背景顏色，而不是，結合舍入左上角和右邊界

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

來源

2017-05-28 09:43:27 LGSon

謝謝你的回答@LGSon，但你能告訴我這些白線是從哪裏來的？ – Arun

謝謝@LGSon這是我期待的。偉大的幫助！ – Arun

當邊框的左右顏色變得透明時，線條出現在FF中

回答

相關問題