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

この回答から貼り付けられたコピー:ユーザーmingosによるBorder Radius = Background Bleed、10 年 12 月 9 日 18:10 に回答:

それはあなたが待っているものではないことはわかっていますが、私はこれを言わなければなりません: use an image . これは、すべてのブラウザーでブリードを排除できる可能性があるためだけではありません。Firefox でのブリードの問題は、Chrome が容赦なくボタンの外観を破壊する方法に比べれば何でもありません...確認して泣き始めてください :(.-moz-background-clip: padding; ...

于 2013-04-23T13:28:21.183 に答える