1

我正在尝试创建一个圆形仪表，它将根据值进行更新。问题是外圈有一个红色边框......有没有一个好的方法来删除它......这是我的小提琴

这是 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;
}
4

2 回答 2

1

我认为这是一个抗锯齿问题。

你唯一能做的就是添加一个盒子阴影来稍微改进：

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

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

或者在具有更多设计控制可能性的 HTML5 画布中进行。

于 2013-04-23T13:24:04.397 回答
0

从这个答案复制粘贴：Border Radius = Background Bleed by user mingos，2010 年 12 月 9 日 18:10 回答：

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

于 2013-04-23T13:28:21.183 回答