Закругленные углы 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
简体中文
繁體中文

О переводах

Закруглённые углы (свойство border-radius) | CSS — Примеры

Генератор border-radius CSS


px%



	Ввести число ⇩
	Ввести число ⇩

<style>
. radius {
  border: 2px solid CornflowerBlue;
  border-radius: 0 ;
}
.radius {
  border: 2px solid CornflowerBlue;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
<div>содержимое блока с закруглёнными углами</div>

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

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

<div>содержимое блока</div>

Круглые углы у картинки

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

<img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg" style="border-radius: 100%;">

Закруглить края у видео на YouTube

<iframe src="http://www.youtube.com/embed/fXwUPXY9eaY?rel=0" frameborder="0" allowfullscreen style="border: 20px solid #1b1b1b; border-radius: 20px; box-sizing: border-box;"></iframe>

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1	2	3
1.1	2.1	3.1
1.2	2.2	3.2

<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
    <tr>
      <td>1.1</td>
      <td>2.1</td>
      <td>3.1</td>
    </tr>
    <tr>
      <td>1.2</td>
      <td>2.2</td>
      <td>3.   2</td>
    </tr>
</table>

border-radius у вложенных элементов

Сравните

<div><div></div></div> <div></div> <div><div></div></div>

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

внешний радиус = внутренний радиус + ширина рамки
47px = 32px + 15px

CSS скругление углов у border-image

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

<div> <div> <div>содержимое блока</div> </div> </div>

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

<style>
. radius {
  height: 200px;
  border: 7px solid red;
  border-radius: 100%; 
}
</style>
<div>...</div>

HTML круг

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

  
      <style>
      .radius {
        width: 200px; height: 200px;
        border: 7px solid red;
        border-radius: 100%; 
      }
      </style>
     <div>...</div>

HTML цилиндр

  
      <style>
      .radius {
        width: 200px; height: 200px;
        border: 7px dashed red;
        border-radius: 100%/20%; 
      }
      </style>
     <div>...</div>

Закругленные три края, HTML капля

<style>
.radius {
  width: 200px; height: 200px;
  border: 7px inset red;
  border-radius: 0% 100% 100%;
}
</style>
<div>...</div>

HTML полукруг

<style>
.radius {
  width: 200px; height: 200px;
  border: 1px dashed red;
  border-radius: 100% 100% 0% 0%;
}
</style>
<div>. ..</div>

HTML лист

<style>
.radius {
  width: 200px; height: 200px;
  border: 7px groove red;
  border-radius: 70% 0 / 70%;
}
</style>
<div>...</div>

HTML яйцо

  <style>
  .radius {
    width: 200px; height: 300px;
    border-radius: 80% / 100% 100% 60% 60%; 
    background: #f1f1f1;
  }
  </style>
  <div>...</div>

Камушек HTML

   <style>
   .radius {
     width: 200px; height: 200px;
     border-radius: 60% 80% / 100% 90% 60% 50%;
     background: #f1f1f1;
   }
   </style>
   <div>...</div>

Слайды с конференции

CSS Закругленные границы

❮ Предыдущая Следующая ❯

CSS округлые границы

Собственность Border-Radius используется для добавления округлых границ к элементу:

Нормальная граница

Круглая граница

Кружная граница

Пример

P {
граница: 2 пикселя, сплошная красная;
граница-радиус: 5px;
}

Попробуйте сами »

Дополнительные примеры

Все основные свойства границ в одном объявлении
В этом примере демонстрируется сокращенное свойство для установки всех свойств верхней границы в одном объявлении.

Установка стиля нижней границы
В этом примере показано, как задать стиль нижней границы.

Установка ширины левой границы
В этом примере показано, как установить ширину левой границы.

Установка цвета четырех границ
В этом примере показано, как установить цвет четырех границ. Может иметь от одного до четырех цветов.

Установка цвета правой границы
В этом примере показано, как установить цвет правой границы.

Проверьте себя с помощью упражнений

Упражнение:

Используйте сокращенное свойство border, чтобы установить «4px», «пунктирную», «красную» границу для элементов

<стиль>
п {
  : ;
}

<тело>
   Это заголовок 
  Это абзац
  Это абзац

Начать упражнение

Все свойства границ CSS

Свойство	Описание
граница	Задает все свойства границ в одном объявлении
нижняя граница	Задает все свойства нижней границы в одном объявлении
цвет нижней границы	Задает цвет нижней границы
нижняя граница стиля	Устанавливает стиль нижней границы
ширина нижней границы	Устанавливает ширину нижней границы
цвет рамки	Задает цвет четырех границ
граница левая	Задает все свойства левой границы в одном объявлении
граница левая	Задает цвет левой границы
левый край	Устанавливает стиль левой границы
граница слева	Устанавливает ширину левой границы
радиус границы	Устанавливает все четыре свойства border-*-radius для закругленных углов
граница правая	Задает все свойства правой границы в одном объявлении
граница правого цвета	Задает цвет правой границы
правая граница	Устанавливает стиль правой границы
граница справа	Устанавливает ширину правой границы
с каймой	Устанавливает стиль четырех границ
верхняя граница	Задает все свойства верхней границы в одном объявлении
цвет верхней границы	Задает цвет верхней границы
бордюрный верх	Устанавливает стиль верхней границы
ширина верхней границы	Устанавливает ширину верхней границы
ширина границы	Устанавливает ширину четырех границ

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.

CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

лучших примеров

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Закругленные углы | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких блоков, многочисленных фоновых изображений, по одному на угол, наложенных на несколько вложенных элементов div . Аргх, некрасиво. Ну, не больше. Теперь, с помощью простого CSS, вы можете добавить в дизайн больше изгибов, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Однако не бойтесь — вам не обязательно иметь границы. Свойство border-radius можно использовать для добавления угла к каждому углу блока.

#мэрилин {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}

Вот и все. Закругленные углы, видите? Ну, да, если у вас толковый браузер (см. примечание ниже).

Углы обрезаются вокруг соответствующих четвертей окружности (или эллипса) заданного радиуса.

Конечно, если вы хотите границу…

#ok_a_border_then {
    граница: 5px сплошная #8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5 пикселей; 
}

Упс.

Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.

Несколько значений

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

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

#монро {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 6px 12px 18px 24px; 
}

Радиус границы с несколькими значениями.

Пышные.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый с первой длиной (или процентом) и верхний правый + нижний левый со вторым. Три значения? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Сокрушительный.

Гах! Просто должны были быть проблемы с браузером, не так ли? Черт бы вас побрал, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо обойтись дизайном в тех браузерах, которые не имеют закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на аналогичные проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для старых, малоиспользуемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Закругленные углы css: Скруглённые уголки | htmlbook.ru

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

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

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

Результат

Языки

Закруглённые углы (свойство border-radius) | CSS — Примеры

Генератор border-radius CSS

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

Круглые углы у картинки

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

border-radius у вложенных элементов

CSS скругление углов у border-image

Округление outline

Закругление углов в примерах

HTML овал

HTML круг

HTML цилиндр

Закругленные три края, HTML капля

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

CSS Закругленные границы

CSS округлые границы

Пример

Дополнительные примеры

Проверьте себя с помощью упражнений

Упражнение:

Это заголовок

Все свойства границ CSS

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

лучших примеров

Закругленные углы | HTML Собака

Радиус границы?

Несколько значений

Добавить комментарий Отменить ответ

Рубрики