2013-10-11 4 views
0

я попытался перелив: скрытое решения для фона которым ломает границы радиуса: http://jsfiddle.net/ypjDC/17/радиуса границы частично нарушен

<div style="width: 200px; border: 3px solid; border-radius: 7px; overflow: hidden;"> 
    <div style="float: left; width: 50px; background-color: #800000;"> 
     <p>test</p> 
    </div> 

    <div style="float: right; width: 50px; background-color: #800000;">test</div>  

    <div style="clear: both;"></div> 
</div> 

но всегда есть проблема, вы можете увидеть небольшое белое пространство по углам:/

Как исправить это?

+1

Белое пространство? Не совсем точно, что вы имеете в виду ... могут быть некоторые проблемы сглаживания/субпикселя, но ничего, что действительно очевидно для невооруженного глаза. –

+0

Да, вы не можете ничего с этим поделать. Или вы должны разделить его на 3 части: 1 левая часть с фоном, border-top/left/bottom, радиус границы topleft, bottomleft - 1 средняя часть с верхним/нижним краем - 1 правая часть с фоном и граничный верхний/правый/нижний, правый радиус границы, правый радиус прямоугольника. – davey

+0

Как сказал @Paulie_D, я тоже не вижу ничего плохого. Это в каком-либо конкретном браузере? – Harry

ответ

1

Вы можете добавить врезку коробка-тень, которая имеет тот же цвет вашей границы с вашей основной DIV:

<div style="width: 200px; border: 3px solid; border-radius: 7px; overflow: hidden;box-shadow: 0px 0px 0px 1px #000 inset;"> 

Это изменение немного вашего пограничную внешний вид, но и удалить белую область.

FIDDLE

+0

Сделано [скрипка] (http://jsfiddle.net/ZcgMp/1/), чтобы увидеть разницу между тем, что вы сделали и после. – Gray

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