Как в css закруглить края: Скруглённые уголки | htmlbook.ru

Закругленные углы и блоки с тенью

Закругленные углы и блоки с тенью

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Евгений (address data)

Смотрите также указатель всех приёмов работы.

Закругленные углы и блоки с тенью

На создание этой страницы вдохновила работа Арве Берсвендсена (Arve Bersvendsen). У него есть много других интересных демонстраций CSS.

В CSS3 есть свойства для создания закругленных границ, границ, состоящих из изображений и блоков с тенями. Но немного потрудившись, вы сможете их частично смоделировать, начиная уже с версии CSS2 — причём без таблиц и дополнительной разметки.

Конечно, закругленные границы и тени гораздо легче сделать при помощи CSS3, чем в CSS2. Например, чтобы задать абзацу тонкую красную рамку с закругленными углами, в CSS3 вам достаточно всего двух строк наподобие этих:

P { border: solid thick red;
    border-radius: 1em }

А для того, чтобы добавить смазанную тень на половину еm ниже и правее абзаца, достаточно будет всего лишь одной линии:

P { box-shadow: black 0. 5em 0.5em 0.3em }

(Вы можете посмотреть здесь и здесь, чтобы убедиться как это работает.) Однако если эти эффекты нужны в старых браузерах и вы не возражаете против сложности и отсутствия гибкости, вы можете использовать технику, описанную ниже. В крайнем случае, это будет хорошей проверкой для дефектных браузеров.…

Пять изображений на одном элементе

Главная хитрость состоит в использовании сгенерированного контента (‘:before’ и ‘:after’) для того, чтобы поместить четыре дополнительных изображения на один элемент. У псевдоэлементов ‘:before’ и ‘:after’ могут быть фоновое изображение и изображение переднего плана, плюс фоновое изображение у самого элемента — в сумме это даёт нам пять изображений.

Мы создаем пять изображений в формате PNG images и размещаем их в четырех углах и напротив правого края элемента. Вот изображения:

верхний левый угол:

верхний край и верхний правый угол:

средняя часть и правый край:

нижний левый угол:

нижний край и нижний правый угол:

А вот правила CSS для их расположения:

blockquote {
    max-width: 620px;
    background: url(rs-right. png) right repeat-y }
blockquote:before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote:after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Так как наше фоновое изображение шириною в 620px, мы не можем позволить блоки шире 620px без интервалов. Поэтому тут есть свойство ‘max-width’. Свойство ‘display: block’ необходимо для того, чтобы убедиться, что сгенерированный контент формирует собственные блоки сверху и снизу основного контента, вместо того, что помещаться на первой и последней строчке. Свойство ‘line-height: 0’ гарантирует, что сверху и снизу изображений не останется свободного места для надстрочных и подстрочных символов в свойстве ‘content’.

Результат

А вот как это выглядит:

Видите бледный зеленый блок с закругленными углами и тенью на белом фоне? Если нет, значит, ваш браузер некорректно справляется с генерированием контента (или не справляется вовсе).

Исходный код HTML не содержит ничего лишнего:

<blockquote>
<p>Видите бледный зеленый блок с
закругленными углами и тенью на белом фоне?
Если нет, значит, ваш браузер некорректно
справляется с генерированием контента (или не
справляется вовсе).
</blockquote>

Bert Bos, style activity lead
Copyright © 1994–2021 W3C^® Privacy policy

Created 6 January 2004;
Last updated Ср 06 янв 2021 05:40:49

Языки

• Azərbaycan
• Български
• Deutsch
• Ελληνικά
• English
• Español
• Français
• Bahasa Indonesia
• Norsk
• Nederlands
• Polski
• Português brasileiro
• Português
• Русский
• Tagalog
• Українська
• Tiếng Việt
• 简体中文
• 繁體中文

О переводах

Как сделать закругленные углы css

Категория: Сайтостроение, Опубликовано: 2016-08-10
Автор: Юлия Гусарь

Приветствую вас, дорогие читатели!

Сегодня я расскажу и покажу как сделать закруглённые углы при помощи css. Ещё совсем недавно закруглённые углы на сайтах делались исключительно при помощи картинок, то есть нужно было заранее подготовить картинку в фотошопе или другой аналогичной программе, закруглить для неё углы так как вам нужно, а потом разместить её на сайте.

Навигация по статье:

• Как закруглить углы для блока?
• Как закруглить углы картинки при помощи CSS?
• Куда вставлять CSS код?
• Как ещё можно закруглить углы при помощи CSS?

Но к счастью эти времена остались позади и сегодня сделать закруглённые углы для любого блока, картинки, кнопки или таблицы можно при помощи одной строчки CSS кода.

Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.

Как, например, здесь:

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

<div class=”round-corner”> </div>

<div class=”round-corner”> </div>

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

.round-corner{ height:100px; width:200px; background:#2F73B6; }

.round-corner{ height:100px; width:200px; background:#2F73B6; }

А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:

border-radius: 20px;

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

Радиус закругления может задаваться как в пикселях, так и в процентах.

Например:

border-radius: 10%;

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

Как закруглить углы картинки при помощи CSS?

Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.

Для картинки CSS код будет выглядеть так:

.content img { border-radius: 20px; }

.content img { border-radius: 20px; }

Вот что получится:

Если вы не знаете как легко и быстро вычислить класс или идентификатор блока или любого другого элемента на сайте, то обязательно почитайте эту статью с видеоинструкцией.

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

1. 1. Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

   .round-corner{ border-radius: 20px; }

   .round-corner{ border-radius: 20px; }

   Где вместо «round-corner»

   будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

   Выглядеть это будет так:

   <style> .round-corner{ border-radius: 20px; } </style>

   <style> .round-corner{ border-radius: 20px; } </style>

3. 3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style. Для картинки это будет выглядеть так:
   

   <img src=”images/pic.png” style=” border-radius: 20px;”

   <img src=”images/pic. png” style=” border-radius: 20px;”

Первый вариант конечно предпочтительней, но если он вызывает у вас определённые трудности, то воспользуйтесь любым другим.

Как ещё можно закруглить углы при помощи CSS?

В примере выше я показала как закруглить сразу все 4 угла, но благодаря данному CSS свойству можно закруглять углы по отдельности и задавать им разный радиус закругления.
Для этого всего лишь нужно указать не одно, а четыре значения (для каждого угла своё)

1. 1.На первом месте – левый-верхний угол
2. 2.На втором – правый верхний угол
3. 3.На третьем – правый нижний угол
4. 4.На четвёртом – левый нижний

Задавая разные значения можно получить следующие варианты закругления углов:

Для этого нужно прописать:

border-radius: 0 80% 0 80%;

border-radius: 90% 100% 0 100%;

border-radius: 100% 100% 0 0;

border-radius: 100% 25% 25% 100%;

border-radius: 100%/50%;

border-radius: 100%;

Как видите всё просто! Надеюсь, что у вас не возникнет проблем с созданием закруглённых углов при помощи CSS!

Если статья была для вас полезной, то не забудьте поделиться ею в социальных сетях.

Для этого просто нажмите на кнопку одной из социальных сетей под этой статьей.

Если будут какие то вопросы – пишите их в комментариях. На этом сегодня всё! До встречи в следующих статьях 🙂

CSS Закругленные края

html

3 месяца назад

от Aqsa Yasin

При работе со многими веб-сайтами и языками сценариев вы, возможно, сталкивались со многими ситуациями, когда сталкивались с закругленными краями или углами некоторых элементов или изображений. Многие разработчики и программисты стилизовали изображения или элементы HTML, чтобы сделать свои веб-страницы более эстетичными и привлекательными. Эти концепции также были реализованы в стилях HTML CSS. Он предоставляет нам свойство радиуса границы, а также различные свойства отступов, ширины и высоты для скругления краев некоторых элементов. В этой статье мы рассмотрим эти свойства, которые делают веб-страницу более привлекательной.

Пример #01:

Скруглим края любых изображений или некоторых абзацев. Мы начали HTML-код с использованием базового тега HTML, за которым следует тег заголовка. Тег head содержит тег title, который использовался для присвоения заголовка веб-странице в виде «CSS закругленных краев или углов». Внутри тега body HTML-документа мы использовали заголовок размера 1, который не будет использоваться для скругления углов. Три абзаца были использованы с использованием тега абзаца «p».

Первые два абзаца определены с двумя разными классами: a и b. Третий абзац был указан с идентификатором «c». Все эти три абзаца содержат предложения, которые можно было бы использовать в качестве содержания абзаца. Эти абзацы могут отображаться с закругленными краями на HTML-странице. Давайте посмотрим на CSS этой страницы. В теге стиля этого HTML-скрипта мы указали классы a и b для первых двух абзацев, чтобы отдельно стилизовать их оба, в то время как идентификатор «c» используется со знаком решетки для стилизации отдельно.

Мы использовали свойство радиуса границы для первого класса «а», чтобы добавить радиус 25 пикселей, и фон стал бы небесно-голубым. Свойство радиуса границы также использовалось для второго класса, чтобы добавить радиус границы 45 пикселей со сплошной рамкой в ​​два пикселя вокруг него. Для обоих первых классов мы использовали 20-пиксельный отступ, 200-пиксельную ширину и 50-пиксельную высоту. С другой стороны, идентификатор третьего абзаца был использован для добавления радиуса 90 пикселей вокруг него.

Используя свойство фона, в качестве фона было добавлено изображение. Наряду с этим свойство положения фона использовалось для позиционирования фона изображения, а свойство повторения фона было установлено на повторение. Благодаря использованию этого свойства фоновое изображение может повторяться максимальное количество раз. Отступы, высота и ширина будут указаны в кавычках так же, как мы использовали в двух приведенных выше стилях для абзацев. Теперь код завершен, и мы можем запустить его в коде Visual Studio через меню «Выполнить» на панели задач, а затем выбрать «начать отладку».

Вывод этого HTML-кода отображается в браузере Chrome, как показано ниже. Первые два абзаца были оформлены в пределах радиуса границы 25 пикселей и 45 пикселей соответственно. Оба абзаца содержат разные фоны с одинаковыми отступами, шириной и высотой. Вы можете видеть, что края обоих радиусов абзаца были закруглены.

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

Пример № 2:

Мы должны инициализировать этот пример с помощью основного тега HTML и тега заголовка. Тег title использовался для присвоения заголовка этой HTML-странице в виде «закругленных краев или углов CSS». Взглянув на тег body этого HTML-скрипта, мы обнаружили один заголовок размером 1 с простым текстовым заголовком. Эта HTML-страница содержит в общей сложности 5 абзацев с использованием тегов или элементов абзаца. Первый абзац показывает, что он будет содержать границу радиусом 50 пикселей, и будет сформирована форма затмения.

Во втором абзаце не используется ничего, кроме идентификатора «затмение». Все остальные три абзаца содержат свои собственные определенные классы: четыре, три и два, а также несколько предложений, показывающих значения радиуса границы, используемые для создания различных затмений для определенных абзацев. Эти абзацы будут показывать общее количество углов, которые скругляются. Идентификатор «eclipse» для первого абзаца был использован для оформления первого абзаца в eclipse. Мы указываем радиус границы 50%, фон желто-зеленого цвета, отступ 10 пикселей, ширину 110 пикселей и высоту 50 пикселей для первого абзаца. Затем мы использовали класс третьего абзаца, «четыре», чтобы закруглить четыре угла абзаца. Для этого мы использовали свойство радиуса границы для верхнего, нижнего, левого и правого краев абзаца. Мы указали фон как деревянное дерево с отступом 15 пикселей, шириной 200 пикселей и высотой 40 пикселей.

Это означает, что все четыре угла или края третьего абзаца будут закруглены. Чтобы четвертый абзац был оформлен классом «три», три его угла или края должны быть закруглены, а один оставить без изменений. Фон был указан как золотой, а отступы, ширина и высота будут такими же, как мы использовали для третьего абзаца. Мы использовали класс «два» для пятого абзаца, чтобы закруглить два его угла. Будут использоваться одни и те же отступы, ширина и высота, а цвет для этого абзаца будет другим. Первый абзац не будет отображать закругленные края, потому что он не содержит для него никакого стиля. Давайте сохраним этот HTML-скрипт и выполним его с кодом Visual Studio через параметр запуска отладки.

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

Заключение

Это все об использовании свойства радиуса границы для скругления краев любого HTML-элемента в HTML-скрипте. Для этой цели мы использовали HTML-примеры очень простым и изысканным способом. В первом примере мы продемонстрировали использование свойства радиуса границы для одновременного скругления всех краев одного элемента или изображения без указания краев. С другой стороны, во втором примере мы указали использование разных углов или краев для округления этих краев или углов соответственно с использованием разных значений.

Об авторе

Aqsa Yasin

Я целеустремленный профессионал в области информационных технологий со страстью к писательству. Я технический писатель и люблю писать для всех разновидностей Linux и Windows.

Посмотреть все сообщения

Радиус границы: создавайте закругленные углы с помощью CSS!

Tweet

Свойство CSS3 border-radius позволяет веб-разработчикам легко использовать более закругленные углы в своих элементах дизайна без необходимости использования угловых изображений или использования нескольких тегов div, и, возможно, это один из самых обсуждаемых аспектов CSS3. .

С момента первого анонса в 2005 году свойство boder-radius получило широкое распространение в браузерах (хотя и с некоторыми расхождениями), и благодаря относительной простоте использования веб-разработчики быстро воспользовались этой новой технологией.

Вот простой пример:

Это поле должно иметь закругленные углы для Firefox, Safari/Chrome, Opera и IE9.

Теоретически код для этого примера довольно прост:

#example1 {
border-radius: 15px;
}

Однако на данный момент вам также необходимо использовать префикс -moz- для поддержки Firefox (дополнительные сведения см. в разделе поддержки браузеров этой статьи):

#example1 {
-moz- радиус границы: 15px;
радиус границы: 15 пикселей;
}

Как это работает

Скругленные углы можно создавать независимо, используя четыре отдельных свойства border-*-radius (border-bottom-left-radius, border-top-left-radius и т. д.) или для всех четырех углов. одновременно используя сокращенное свойство border-radius.

Сначала мы рассмотрим синтаксис отдельных свойств border-*-radius, а затем рассмотрим, как работает сокращенное свойство border-radius.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

Каждое из свойств border-*-radius может принимать одно или два значения , выраженное в виде длины или процента (проценты относятся к соответствующим размерам рамки).

Синтаксис:

граница-*-*-радиус: [ <длина> | <%> ] [ <длина> | <%> ]?

Примеры:

граница-верхний-левый-радиус: 10px 5px;
граница-нижний-правый-радиус: 10% 5%;
граница-верхний-правый-радиус: 10px;

Там, где указаны два значения, они используются для определения по порядку горизонтального и вертикального радиусов четверти эллипса, который, в свою очередь, определяет кривизну угла внешнего края границы.

Если указано только одно значение, оно используется для одинакового определения как горизонтального, так и вертикального радиусов.

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

Если одно из значений равно нулю, угол будет квадратным, а не круглым.

border-radius

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

Синтаксис:

[ <длина> | <процент> ]{1,4} [ / [ <длина> | <процент> ]{1,4} ]?

Примеры:

радиус границы: 5px 10px 5px 10px / 10px 5px 10px 5px;
радиус границы: 5 пикселей;
радиус границы: 5px 10px / 10px;

Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырех углов. Необязательный второй набор значений, перед которым ставится «/», определяет вертикальные радиусы для всех четырех углов. Если предоставляется только один набор значений, они используются для одинакового определения как вертикали, так и горизонтали.

Для каждого набора значений применяется следующее:

Если указаны все четыре значения, они представляют верхний левый, верхний правый, нижний правый и нижний левый радиусы соответственно. Если нижний левый опущен, он совпадает с верхним правым, если нижний правый опущен, он совпадает с верхним левым, и если указано только одно значение, оно используется для одинаковой установки всех четырех радиусов.

Поддержка браузера

В настоящее время Opera (начиная с версии 10.5), Safari (начиная с версии 5) и Chrome (начиная с версии 5) поддерживают отдельные свойства border-*-radius и сокращенное свойство border-radius, как изначально определено в текущая спецификация W3C (хотя по-прежнему существуют нерешенные ошибки по таким вопросам, как переходы стилей границы, использование процентов для длины и т. д.).

Mozilla Firefox (начиная с версии 1.0) поддерживает border-radius с префиксом -moz-, хотя есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (см. ниже).

Обновление: Последние ночные версии Firefox поддерживают радиус границы без префикса -moz-.

Safari и Chrome (и другие браузеры на основе webkit) поддерживают border-radius с префиксом -webkit- начиная с версии 3 (больше не требуется, начиная с версии 5), хотя опять же с некоторыми расхождениями с текущей спецификацией (см. эту статью для дополнительные сведения о том, как старые версии Webkit обрабатывают радиус границы).

Даже Microsoft пообещала и продемонстрировала в своем последнем предварительном выпуске поддержку border-radius, начиная с Internet Explorer 9 (без префикса).

Префикс -moz-

Браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz- , начиная с версии 1.0. Однако только начиная с версии 3.5 в браузере разрешены эллиптические углы, т. е. принятие двух значений на угол для независимого определения горизонтального и вертикального радиусов. До версии 3.5 браузер принимал только одно значение для каждого угла, что приводило к углам с одинаковыми радиусами по горизонтали и вертикали.

Синтаксис, начиная с Firefox 3.5 и выше, в основном следует текущей спецификации W3C, как описано в этой статье, с префиксом -moz-. Единственное существенное различие заключается в именовании отдельных свойств border-*-radius, при этом свойства с префиксом -moz- следуют немного другому соглашению об именах, как показано ниже:

Спецификация W3C	Реализация Mozilla
радиус границы	-moz-граница-радиус
граница-верхний-левый-радиус	-moz-border-radius-topleft
граница-верхний-правый-радиус	-moz-border-radius-topright
граница-нижняя-правая-радиус	-moz-border-radius-bottomright
граница-нижний-левый радиус	-moz-border-radius-bottomleft

Реализация Mozilla также ведет себя немного иначе, чем в спецификации, когда указываются проценты. Вы можете прочитать больше о Центре разработчиков Mozilla здесь.

Кроссбраузерные примеры

Вот несколько основных примеров, которые должны работать в текущих версиях Firefox, Safari/Chrome, Opera и даже IE9:

A

B

C

D 3

2 E

3 #Example_A {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px;
граница-нижний-правый-радиус: 50px;
}

#Example_B {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px 25px;
граница-нижний-правый-радиус: 50px 25px;
}

#Example_C {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 25px 50px;
граница-нижний-правый-радиус: 25px 50px;
}

#Example_D {
height: 5em;
ширина: 12см;
-moz-border-radius: 1em 4em 1em 4em;
радиус границы: 1em 4em 1em 4em;
}

#Example_E {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius: 25px 10px / 10px 25px;
радиус границы: 25px 10px / 10px 25px;
}

#Example_F {
высота: 70 пикселей;
ширина: 70 пикселей;
-moz-border-radius: 35px;
радиус границы: 35 пикселей;
}

Дополнительные примечания и дополнительная литература

Спецификация фонов и границ W3C более подробно описывает форму угла (особенно в случаях, когда две соседние границы имеют разную ширину), влияние радиуса границы на фоновые изображения, цвет и переходы стилей, что происходит, когда кривые перекрываются, и эффект радиуса границы на таблицах.