Question

我正在尝试创建一个根据值更新的圆形仪表。问题是有一个红色的边框没有出圆...是否有一个很好的方法来删除... 这是我的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;
}

Answer 1

我认为这是一个消除锯齿的问题。

你唯一能做的就是添加一个盒子阴影以便稍作改进：

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

（JS-Fiddle：http://jsfiddle.net/aAeSk/2/）

或在具有更多设计控制可能性的HTML5画布中执行此操作。

Answer 2

通过用户Border Radius = Background Bleed从此回答粘贴的副本：mingos，于2010年12月9日18:10回答：

我知道，这不是你在等待的，但我必须这样说： 使用图片。这不仅是因为可以消除所有浏览器的出血。你在Firefox上的流血问题是什么相比之下，Chrome无情地扼杀了你的外表按钮...检查并开始哭泣:( .- moz-background-clip：padding; ...

创建圆形仪表，背景颜色会产生问题

2 个答案: