Создание закругления рамки
20 сентября 2016 | Опубликовано в css | 2 Комментариев »
Свойство закругления рамки основывается на базовом свойстве рамки и превращает углы любого элемента в четверти эллипса. Значением этого свойства может быть любая единица измерения длинны CSS. Обратите внимание, современные версии всех браузеров поддерживают свойство закругления рамки без приставок производителей, которые нужны только очень старым версиям браузеров.
Возьмем блок с идентификатором #bestanime, содержащий заголовок и нумерованный список:
<div id="bestanime"> <h3>Top Three Anime DVDs</h3> <ol> <li>Ghost In The Shell <li>Spirited Away <li>Akira </ol> </div>
Чтобы закруглить углы блока, можно применить свойство закругления рамки следующим образом:
div#bestanime { border: 5px double #000; border-radius: 20px; }
Свойство закругления рамки можно также задать для отдельных углов, если нужно закруглить только один:
div#bestanime { border: 5px double #000; border-top-right-radius: 30px; }
Еще возможно задать свойству закругления рамки другие значения высоты и ширины, чтобы углы из полукруглых стали эллиптическими, что было использовано при создании изображения Евы, героини анимационного фильма ВАЛЛ-И, с использованием только CSS:
div#bestanime { border: 5px double #000; border-top-left-radius: 75px 60px; }
Обратите внимание, свойство тени блока повторяет форму закругления рамки. А также два отдельных значения у свойства закругления рамки задают закругление углов следующим неожиданным образом: первое значение задает верхний левый и нижний правый углы элемента, а второе — верхний правый и нижний левый.
В старых версиях браузеров рамки с большими радиусами закруглений углов, значительной толщины и контрастных цветов выглядели несколько «ступенчато» из-за плохо работающего сглаживания при отображении эллипсов, но в современных версиях браузеров эта проблема не заметна.
Использование разных типов рамок с разных сторон у элемента может вызвать сложности, если к этим рамкам применяется свойство закругления рамки.
border-radius.com — понятный генератор кода для создания закругленных углов, у Mozilla Developer Network тоже есть подобный.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
21 сентября 2016 в 2:00
Очень жду от автора цикла статей:
делаем текст подчеркнутым
делаем текст по жирному
и продвинутые техники сделать текст жирно подчеркнутым
а так же другие вольные пересказы спецификации css
Ответить