Скругление углов, часть 1[11/33]
Закруглять углы элементов можно с помощью свойстваborder-radius.
Свойство задаёт радиус скругления углов в пикселях или процентах. Если у блока есть рамка, то скругляется и она.
Свойствоborder-radiusпринимает от одного до четырёх аргументов.
Скругление углов, часть 2[12/33]
Вы можете закруглять отдельные углы с помощью свойств:border-top-left-radius,border-top-right-radius,border-bottom-right-radiusиborder-bottom-left-radius.
А ещё можно задавать разные горизонтальные и вертикальные радиусы скругления. Для этого нужно написать два значения через пробел в свойстве скругления угла. Первое значение задаёт радиус по горизонтали, второе — по вертикали:
/* горизонтальный радиус 30px, вертикальный 15px */
border-top-right-radius: 30px 15px;
Разные горизонтальные и вертикальные радиусы можно задавать и в свойствеborder-radius. Для этого нужно использовать/, например:
/* горизонтальный радиус всех углов 10px, вертикальный 5px */
border-radius: 10px / 5px;
/* разные горизонтальные и вертикальные радиусы у каждого угла */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;
Изображение рамки: border-image-source[13/33]
Мы подошли к обширной и интересной теме, в которой рамки и фоновые изображения встречаются.
Итак, семейство свойствborder-imageзадаёт фоновое изображение для рамки блока. Поддержка данного семейства свойств в современных браузерахдовольно неплохая.
Свойствоborder-image-sourceзадаёт путь к изображению рамки. По умолчанию картинкой заполнятся только углы рамки. В следующих заданиях мы разберём, как можно управлять отображением рамки.
В качестве изображения для рамки используем вот такую картинку:
Синтаксис свойства такой же, как уbackground-image, то есть:
border-image-source: url("image.jpg");
Давайте же зададим фоновое изображение рамки и начнём его настраивать.
Курс «
»
Изображение рамки: border-image-slice[14/33]
Давайте разберёмся, как работает механизм «нарезки» фонового изображения для рамки.
Каждая рамка имеет9областей:4угла,4стороны и центральную область. Для заполнения этих областей браузер должен нарезать картинку для рамки на9частей. Когда браузер не знает, как это сделать, он просто размещает картинку по углам — мы видели это в предыдущем задании.
Свойствоborder-image-sliceзадаёт отступы от краёв картинки до четырёх линий, которые «разрезают» её на части, как на схеме справа. Если эти отступы небольшие, то получается «нарезка» из9частей, которые затем размещаются в соответствующих областях рамки.
Но если отступы слишком большие (больше половины картинки), то браузер не может получить9частей и располагает то, что отрезалось по углам.
Значение свойства можно задавать числом без единицы измерения (оно обычно обозначает пиксели) или в процентах (относительно размера самой картинки). Пример:
border-image-slice: 60;
border-image-slice: 10%;
Нарезка несимметричных картинок[15/33]
Сравните две картинки:
Для нарезки первой из них можно было задать одинаковые отступы линий разреза —50px. Для второй картинки этого явно недостаточно — она менее симметрична.
С помощьюborder-image-sliceможно задавать разные отступы линий разреза. Для этого нужно задавать значения через пробел в порядке: верх, право, низ, лево. Пример:
border-image-slice: 10 20 30 40;
Средняя часть картинки обычно не используется. Но если в значение свойства добавить ключевое словоfill, то средняя часть картинки будет отображаться в средней области рамки: она закроет собой фон блока, но не закроет содержимое. Пример:
border-image-slice: 10 20 30 40 fill;
Изображение рамки: border-image-repeat, часть 1[16/33]
Свойствоborder-image-repeatзадаёт способ заполнения фоном боковых сторон рамки (зелёные области на рисунке).
У свойства четыре значения:stretch,repeat,spaceиround.
Значение по умолчанию —stretch. При этом значении фоновые картинки растягиваются на всю длину боковых сторон.
Если задано значениеrepeat, то фоновые картинки будут повторяться. При этом они могут обрезаться.
Можно устанавливать режим заполнения отдельно для горизонтальных и вертикальных сторон рамки.
Например:
/* все стороны рамки заполняются в режиме stretch */
border-image-repeat: stretch;
/* горизонтальные стороны — режим repeat, вертикальные — stretch */
border-image-repeat: repeat stretch;
Давайте посмотрим, в чём различие этих двух вариантов.
Изображение рамки: border-image-repeat, часть 2[17/33]
Значениеroundсвойстваborder-image-repeatтоже устанавливает режим заполнения стороны рамки повторяющимися боковыми участками картинки. Но, в отличие отrepeat, если в ширину стороны не вмещается целое число повторящихся кусочков, крайние части не обрезаются. Кусочки при этом равномерно растягиваются так, чтобы все они стали одного размера и заняли оставшееся место стороны рамки.
Согласно спецификации при заданном значенииspaceалгоритм похож наround, только для компенсации оставшегося места кусочки картинки не растягиваются, а остаются прежней ширины, при этом между кусочками появляется дополнительное свободное пространство.
На момент создания курса в современных браузерах реализация свойстваspaceидентична свойствуrepeat.
Проверим значения свойств на практике.
Изображение рамки: border-image-width[18/33]
Следующее свойство, которое мы рассмотрим —border-image-width.
У блока должна существовать рамка определённой толщиныborder-width, тогда ему можно задать и фоновую картинку для рамки. Область, в которой будет отображаться эта картинка по умолчанию равна ширине рамки.
Свойствоborder-image-widthпозволяет управлять шириной видимой области рамки-картинки, масштабировать её. Саму ширину рамки это свойство не меняет.
Если значение этого свойства большеborder-width, картинка рамки заползёт под содержимое, даже если не задано свойствоfill.
Ширина рамки-картинки задаётся в%,px,emили других единицах измерения. Также возможно значениеauto, при котором ширина зависит от значенияborder-image-slice.
Можно задавать разную ширину сторон. В этом случае значения перечисляются аналогичноmargin,paddingв последовательности: верхнее, правое, нижнее, левое. Например:
border-image-width: 10px 20px 30px 40px;
border-image-width: 10px 50px;
Попробуем поуправлять шириной рамки-картинки
Изображение рамки: border-image-outset[19/33]
Ещё одно свойство, относящееся к фоновому изображению рамки,border-image-outset. Аналогичноoutline-offsetэто свойство позволяет отодвинуть рамку за пределы элемента, но при этом одновременно немного масштабируя картинку. Отрицательные значенияborder-image-outsetне поддерживаются.
Отступы рамок-изображений тоже можно задавать разные для каждой из сторон. Синтаксис обычный:
border-image-outset: 10px;
border-image-outset: 10px 20px 30px 40px;
Давайте немного отодвинем рамку у портрета.
Рамки и треугольники, часть 1[25/33]
В этой серии заданий мы рассмотрим интересный приём, связанный со старым добрым свойствомborder. Вы можете использовать обычные рамки для создания необычных эффектов!
У рамок есть одна особенность: если рамка элемента широкая, а сам элемент имеет нулевую ширину и высоту, то стороны рамки становятся треугольными.
Рамки и треугольники, часть 2[26/33]
Теперь чтобы сделать треугольник нужно:
- одной стороне рамки задать нулевую ширину,
- ещё две стороны сделать прозрачными,
- последней стороне задать нужный цвет.
Так с помощью обычногоborderможно создавать треугольные стрелки, направленные во все стороны.
Давайте создадим стрелку-треугольник, направленную вниз.
Рамки и треугольники, часть 3[27/33]
Похожим способом можно создавать треугольные стрелки, направленные по диагонали.
Для этого:
- одной стороне рамки задаём нужный цвет,
- ещё двум сторонам задаём нулевую ширину,
- последнюю сторону делаем прозрачной.
Давайте создадим стрелку-треугольник, направленную по диагонали вверх и вправо.
Стрелка с помощью рамки[28/33]
А теперь давайте добавим стрелке «хвост».
Принцип построения такой же, как и раньше, но теперь треугольником будет не сам элемент, а его псевдоэлемент. Сам же элемент будет «хвостом» стрелки.
Стрелка будет указывать вправо.