Внутреннее скругление

Оцените материал
(0 голосов)

Проблема

Иногда нам требуется контейнер, скругленный только изнутри, внешние углы рамки/контура которого все так же остаются прямыми. Это интересный неизбитый эффект. Подобного эффекта легко добиться с помощью двух элементов:

 

<div class="something-meaningful"><div>
I have a nice subtle inner rounding, don't I look pretty? </div> </div>
.something-meaningful { background: #655; padding: .8em; } .something-meaningful > div { background: tan; border-radius: .8em; padding: 1em; }

Это прекрасно работает, но нам приходится использовать два элемента, тогда как в действительности требуется только один. Можно ли достичь того же эффекта с одним элементом?

Решение

Предыдущее решение более гибкое — оно позволяет пользоваться всеми преимуществами фонов. Например, если мы хотим, чтобы наша «рамка» была закрашена не простым однородным цветом, а обладала какой-то текстурой, добиться этого довольно просто. Однако если мы имеем дело исключительно со старыми добрыми сплошными цветами, то нам хватит и одного элемента (хотя это и грязный способ). Взгляните на следующий фрагмент CSS-кода:
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
Можете угадать, каким будет визуальный результат?  По сути, мы воспользовались тем фактом, что контуры не повторяют скругление углов элемента (и, следовательно, обладают прямыми углами, а тени ( box-shadow ), наоборот, скругляются. Следовательно, если мы наложим их друг на друга, то  box-shadow закроет «дыры», которые контур оставляет по углам, и комбинация этих свойств даст нам необходимый эффект. Обратите внимание, что в действительности  box-shadow не требуется размазывать на величину контура — хватит размазывания, достаточного для заполнения этих «дырок». В действительности, если размазывание будет равно ширине контура, то в некоторых браузерах это может привести к появлению визуальных артефактов, поэтому я рекомендую использовать значение чуть меньше. Это сразу вызывает вопрос: какова минимальная величина размазывания, которую необходимо указать, чтобы закрыть «дыры»?

 Исgользование своqства  outline на скругленном элементе

Исgользование своqства  box-shadow без смещения и размытия на элементе со скругленными углами

Здесь контур подсвечен черным цветом, а тень пурпурным это помогает понять, что происходит с этим элементом.Обратите внимание, что контур рисуется поверх тени
Для того чтобы ответить на этот вопрос, необходимо вспомнить теорему Пифагора, которую мы все изучали в школе и которая позволяет вычислять длины сторон прямоугольных треугольников. Согласно теореме, длина гипотенузы (самой длинной, диагональной стороны треугольника) равна
√(a2+b2)
где a и b — длины катетов. Если катеты равны по величине, то формула превращается в Возможно, вы задаетесь вопросом, какое отношение геометрия уровня средней школы имеет к эффекту скругления внутреннего угла. Взгляните на рисунок


эта схема дает визуальную подсказку относительно того, как вычислить минимальную ширину размазывания. В нашем случае значение  border-radius равно .8em, следовательно, минимальное размазывание равно  .8( 2 1) .33137085em . Все, что нам остается — слегка округлить это значение вверх и указать радиус размазывания .34em. Чтобы избежать необходимости проводить подобные вычисления каждый раз, когда вам требуется данный эффект, можно попросту использовать половину радиуса угла, что гарантированно даст достаточно большое значение,  Обратите внимание также, что данные вычисления обнаруживают еще одно ограничение этого метода:
для того чтобы наш эффект сработал, радиус размазывания должен быть меньше ширины контура, но больше   , где r — это значение  border-radius .
   Это означает, что если ширина контура меньше
, то применить данный эффект невозможно.

 Почему этот способ грязный? Потому что он полагается на тот факт, что контуры не повторяют скругление углов, однако нет никакой гарантии, что это поведение не изменится. В настоящее время спецификация дает разработчикам браузеров право самостоятельно принимать решения относительно того, как должны рисоваться контуры, но в будущем планируется выпустить явную рекомендацию следовать скруглению — данное решение уже принято рабочей группой CSS. Когда жеоно будет фактически реализовано в браузерах, пока чтоостается загадкой.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/inner-rounding

 Десерт на сегодня - видео о боевых роботах. В самом начале один робот замолотил летающего огнедышащего дрона метлой

Прочитано 478 раз Последнее изменение Суббота, 28 января 2017 14:26
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+