Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Скругленные углы: border-radius

.

Скругленные углы: border-radius

Свойство border-radius позволяет создавать скругленные углы, не прибегая к растровым изображениям или дополнительной разметке. Чтобы задать скругленные углы для нашего прямоугольника, нужно просто написать:

Скругленные углы: border-radius

Safari, Chrome, Opera, IE9 и Firefox 4 поддерживают это свойство без префикса (просто border-radius). Префикс -moz-border-radius нужен для версии Firefox 3.6 и более ранних. Впрочем, ко времени, когда вы будете читать эту книгу, их, скорее всего, уже не останется, и эта строка уже не будет нужна. На рисунке 6.3 показано, как выглядит наш блок после добавления этого свойства.

Скругленные углы: border-radius

Рис. 6.3. Скругленные углы вокруг ссылки

Выше приведена краткая запись свойства border-radius. Дело упрощает то обстоятельство, что у нашего прямоугольника все углы симметричны и имеют одинаковый радиус скруглення. Если бы нам были нужны углы разного радиуса, мы должны были бы указать для них все четыре значения, например: border-radius : 5рх ІОрх 15рх 20рх. И точно так же как в ситуации со свойствами padding, margin и border, вы можете настроить каждое значение отдельно:

Скругленные углы: border-radius

Вариант свойства с префиксом -moz- для старых версий Firefox имеет слегка иной синтаксис:

Скругленные углы: border-radius

Результат показан на рис. 6.4.

Скругленные углы: border-radius

Рис. 6.4. Вы можете задать радиус скруглення для каждого угла

При краткой записи порядок углов следующий: верхний левый, верхний правый, нижний правый, нижний левый.

Можно задать только два значения, тогда будет считаться, что первое — радиус для верхнего левого и нижнего правого, а второе — для верхнего правого и нижнего левого. Если вы задаете три значения, то первое будет радиусом левого верхнего угла, второе — правого верхнего и левого нижнего, а третье — правого нижнего.

Мы рекомендуем использовать краткую запись — она короче и по мере того как старые браузеры Firefox выходят из употребления, позволяет избежать использования двойного синтаксиса.

Углы могут быть сглажены и эллиптически. В этом варианте в значении параметра указываются горизонтальный и вертикальный радиусы. К примеру, такая запись: border-bottom-left-radius: 20рх 10рх; создаст эллиптическое скругление в левом нижнем углу.

При краткой записи значения радиусов разделяются косой чертой: border-radius: 20рх / 10рх; создаст четыре одинаковых эллиптических скруглення по углам, a border-radius: 5рх 10рх 15рх 20рх / 10рх 20рх 30рх 40рх; создаст четыре неодинаковых эллиптических законцовки.

Как будет выглядеть результат выполнения последней инструкции, видно из рис. 6.5. Любопытно? Да. Красиво? Не слишком.

Скругленные углы: border-radius

Рис. 6.5. Четыре интересных, неравных, эллиптических скруглення по углам

Вернемся к нашему сайту HTML5 Herald. У нас остается только один элемент со скругленными углами: кнопка отсылки формы. Давайте сделаем это:

Скругленные углы: border-radius

Обратите внимание на некоторые нюансы этого кода.

Во-первых, мы используем селектор атрибута для адресации к полю ввода; во-вторых, для задания радиуса скруглення мы указываем значение в процентах, а не в пикселах.

Первое очень удобно для придания единого стиля сайту, когда позже мы добавим новые формы; другие кнопки могут отличаться по размеру, и если мы жестко зададим радиус в пикселах, несоответствие сразу бросится в глаза.

Свойство border-radius может применяться ко всем элементам, за исключением элемента table, у которого свойство border-collapse имеет значение collapse.

.

Читайте так же:
Not found