CSS3 радиус границы + другая ширина границы, безобразный переход - PullRequest
2 голосов
/ 09 декабря 2010

У меня еще одна хитрая ситуация с CSS3, о которой я ломаю голову. Я оформляю форму с помощью CSS, чтобы иметь границу 10 пикселей по бокам и границу 12 пикселей внизу в сочетании с радиусом границы 15 пикселей.

К сожалению, точка, где границы 12px и 10px встречаются с переходом, не является постепенной, но есть фрагмент 2px, торчащий изнутри границы. Пример (размеры увеличены для ясности):

http://jsfiddle.net/LnKND/1/

Есть идеи, как это исправить, используя только CSS и без лишних элементов? Или это именно так, как это делается в настоящее время, и я должен найти другое решение?

1 Ответ

2 голосов
/ 09 декабря 2010

Добавить

    border-bottom-left-radius:10px 20px;
    border-bottom-right-radius:10px 20px;

ссылка: http://www.w3.org/TR/css3-background/#the-border-radius


для использования в Mozilla

    -moz-border-radius-bottomright
    -moz-border-radius-bottomleft

, если хотите, хотя она решает проблему автоматически, если вы исправите опечатку p в px в примере ).

ссылка: https://developer.mozilla.org/en/CSS/border-bottom-right-radius

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...