创建一个圆形仪表，背景色正在创建问题

我正在尝试创建一个圆形仪表，它将根据值进行更新。问题是有一个红色边框出了圈......有没有移除一个好办法... 这是我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

创建一个圆形仪表，背景色正在创建问题

回答

相关问题