創建一個圓形儀表，背景色正在創建問題

我正在嘗試創建一個圓形儀表，它將根據值進行更新。問題是有一個紅色邊框出了圈......有沒有移除一個好辦法... 這是我fiddle 創建一個圓形儀表，背景色正在創建問題

這是HTML代碼：

<div class="outer"> 
    <div class="left-cov"></div> 
    <div class="right-cov"></div> 
    <div class="inner"> 
     <p class="fy-rate">1.5</p> 
    </div> 
</div>

以下是CSS代碼爲：

* { 
    float:left; 
    margin:0px; 
    padding:0px; 
} 
.outer { 
    border-radius:50%; 
    background-color:red; 
    width:220px; 
    height:220px; 
    position:relative; 
    margin:20px; 
    overflow:hidden 
} 
.inner { 
    border-radius: 50%; 
    background-color:yellow; 
    width:180px; 
    height:180px; 
    position:relative; 
    top:20px; 
    left:20px; 
} 
.left-cov { 
    height:100%; 
    width:50%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background-color:grey 
} 
.right-cov { 
    height:100%; 
    width:50%; 
    background-color:grey; 
    position:absolute; 
    bottom:0px; 
    right:0px; 
} 
.fy-rate { 
    font-size:52px; 
    width:100%; 
    text-align:center; 
    margin-top:45px; 
}

來源

2013-04-23 Bharat Soni

@KyleSevenoaks嘗試小提琴你可以找到你需要的:) – 2013-04-23 13:10:15

嗨，尋找**邊界半徑背景流血**通過網絡爲您的答案：https://www.google.ca/search?num=100&newwindow=1&site=&source= hp＆q = border-radius + bleed關於這種情況，有一些Stackoverflow問題：http://stackoverflow.com/search?q=border-radius+bleed – 2013-04-23 13:19:12

我認爲這是一個反鋸齒問題。

，你唯一可以做的事情或者是添加的box-shadow爲輕微改善：

.left-cov { 
    ... 
    box-shadow: -1px -1px 0 gray; 
}

（JS-小提琴：http://jsfiddle.net/aAeSk/2/）

或者做一個HTML5畫布更多的設計控制可能性。

來源

2013-04-23 13:24:04

複製從這個答案貼：Border Radius = Background Bleed用戶mingos，回答了12月9日'10 18:10：

這不是你在等待什麼，我知道，但我不得不這樣說： 使用圖像。這不僅是因爲可以消除所有瀏覽器上的流血。在Firefox上你的流血的問題是什麼相比，Chrome瀏覽器如何無情地屠殺您按鈕的外觀...檢查它，並開始哭泣：（.- MOZ背景剪輯：填充; ...

來源

2013-04-23 13:28:21

創建一個圓形儀表，背景色正在創建問題

回答

相關問題