Создание круглого метра, цвет фона создает проблемы

Я пытаюсь создать круглый метр, который будет обновляться в соответствии со значением. проблема есть красная кайма из ВНЕ круга ... есть хороший способ, чтобы удалить это ... Это мой 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 попробовать скрипка вы можете найти то, что вам нужно :) –

Привет, ищите ** border-radius background bleed ** через сеть для вашего ответа: 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 –

Я думаю, что это проблема сглаживания.

Единственное, что вы можете сделать, это либо добавление коробка-тени для небольшого улучшения:

.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, ответил 9 дек '10 в 18:10:

Это не то, что вы ждете, я знаю, но я должен сказать, что это: используйте фотографию. Это происходит не только из-за возможности устранения кровотечения во всех браузерах. Ваша проблема отводимого на Firefox ничего по сравнению с тем, как Chrome беспощадно вырезал внешний вид ваших кнопок ... Проверьте это и начинают плакать: (.- Мос-фон-клип: обивка; ...

источник

2013-04-23 13:28:21

Создание круглого метра, цвет фона создает проблемы

ответ

Смежные вопросы