Расчет размера скругленной границы для внутреннего элемента, чтобы он соответствовал внешнему элементу - PullRequest
1 голос
/ 16 августа 2011

Как вы можете видеть в этом примере, два вложенных элемента с одинаковым значением пикселя для скругленных границ не совпадают:

http://jsfiddle.net/bMFaH/

Теперь, есть ли какой-нибудь javascript, который я мог бы запустить, чтобы "вычислить", основываясь на ширине / высоте / толщине границы / ... каким должен быть внутренний радиус границы?

Причина в том, что мне это нужно для множества различных (установленных пользователем) границ радиусов и размеров элементов, поэтому я не могу просто ввести статическое значение.

Редактировать: ОК провел дополнительное тестирование, верно ли это:

Outer radius: x pixels
Outer border: y pixels
Inner radius: x-y pixels

Заранее спасибо, Уэсли

1 Ответ

0 голосов
/ 16 августа 2011

Предполагая, что вы знаете, как получить и установить значения CSS, «формула» для получения внешнего граничного радиуса будет

inner.border-radius + outer.border-width

Кажется довольно простым, чтобы скрипт javascript выполнял математику.

РЕДАКТИРОВАТЬ: Или, как вы упомянули, вы можете рассчитать радиус внутренней границы с помощью external.border-radius - external.border-width.

...