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

Leave a Comment / Css / By /

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

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

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Евгений (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

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

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, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Закругленные углы | 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 соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *