Скругление css: CSS3 | Скругление углов и фон

css — Как скруглить углы внутрь блока с обводкой

Интересует верстка блока с закругленными внутрь углами. Важно не просто их скруглить, но и сохранить обводку у блока.

1

Версия @Ruslan_K, но с границами:

#main {
    margin: 40px;
    height: 100px;
    background-color: #1abc9c;
    position: relative;
    overflow: hidden;
}

#main .edge {
    position: absolute;
}

#main .edge.top {
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

#main .edge.left {
    left: 0;
    top: 10px;
    bottom: 10px;
    right: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

#main .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
    border: 1px solid #000;
}

#main .  corner.top { top: -10px; }
#main .corner.bottom { bottom: -10px; }
#main .corner.left { left: -10px; }
#main .corner.right { right: -10px; }

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

Основная идея: вырезать лишние области с помощью псевдоэлементов.
Понадобится всего два блока в разметке (.wrapper и .content):

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: #efefef;
  width: 300px;
  height: 60px;
  margin: 40px;
  /**
   * Ключевые свойства
   * С помощью position: relative будем позиционировать псевдоэлементы для вырезания границ
   * С помощью overflow: hidden будем делать сектора
   */
  position: relative;
  overflow: hidden;
}

/* Для наглядной демонстрации работы, не нужно в проекте */
.

  
 wrapper.demo {
  border: 2px solid #bad;
  overflow: visible;
}

.content {
  /* Цвет границы блока должен совпадать с границей будущих вырезанных секторов */
  border: 2px solid #07c;
  width: 100%;
  height: 100%;
}

.wrapper::before,
.wrapper::after,
.content::before,
.content::after {
  /* Цвет следует подобрать в цвет фона сайта для перекрытия части основного блока */
  background-color: #fff;
  /* Цвет границы блока должен совпадать с границей основного блока */
  border: 2px solid #07c;
  /* Делаем окружность */
  border-radius: 50%;
  content: '';
  /* Позиционируется относительно .wrapper. Это важно для понимания. */
  position: absolute;
  width: 30px;
  height: 30px;
}

/* Позиционирование будущих секторов: верхний ряд */
.wrapper::before,
.wrapper::after {
  top: -15px;
}

.wrapper::before {
  left: -15px;
}

.   wrapper::after {
  right: -15px;
}

/* Позиционирование будущих секторов: нижний ряд */
.content::before,
.content::after {
  bottom: -15px;
}

.content::before {
  left: -15px;
}

.content::after {
  right: -15px;
}

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

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

Блок с классом .demo добавлен только для понимания того, как это все работает.

---

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

Сгенерировать градиент можно с помощью online-сервиса Ultimate CSS Gradient Generator.

#main {
    margin: 40px;
    height: 100px;
    background-color: #1abc9c;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.  top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Скругление уголков — Stack Overflow на русском

Вопрос задан

10 лет 4 месяца назад

Изменён 10 лет 4 месяца назад

Просмотрен 362 раза

Можно ли для скругленных уголков блоков прописывать свойство cкругления без префиксов? то есть, писать не набор свойств

border-radius: 10px;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-khtml-border-radius: 10px;

а писать просто

border-radius: 10px;

? не будет ли из-за этого проблем с отображением в старых версиях браузеров?

3

Это и делается для кросcбраузерности. Если не хотите все время писать, просто создайте класс типа .br и присваивайте его тем элементам у которых хотите скруглить углы.

.text { font-family: /*...*/; color: /*...*/; /*и так далее*/ }
.br { /*тут ваш стиль скругленных углов*/ }
<p>Some long text</p>

3

Свойства с префиксами уже не актуальны. Можно обходиться просто

border-radius: 10px;

В старых версиях браузеров, для которых предназначены эти префиксы проблемы естественно будут, но смотрим объективно — тех браузеров не осталось. ФФ и Сафари очень сложно найти тех версий, для которых нужен префикс. Работать будет в ФФ/Опера/Сафари/Хром/ИЕ9, как обічно ИЕ8 и ниже идут стороной, но там префиксі все-равно не спасали 🙂 Мое мнение — эти префиксы аттавизм.

5

Существует скрипт -Prefix-free (и подобные), который автоматически подставляет префиксы. Описание: второй пункт

1

Для осла IE8, IE7 есть специальные файлы .htc, которые решают эти проблемы.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS Закругленные углы и теневые блоки CSS

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

Но теперь свойство CSS3 border-radius позволяет веб-дизайнерам рисовать закругленные углы.

радиус границы: 25 пикселей;

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

Источник

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

Вы можете указать разные значения в каждом углу поля.

дел { граница: 5px сплошная #4FFFA1; отступ: 30 пикселей; фон:#F6FFA1; ширина: 250 пикселей; граница-верхний-левый-радиус: 0px; граница-верхний-правый-радиус: 15px; граница-нижний-левый-радиус: 25px; граница-нижний-правый-радиус: 45px; }

вывод

CSS закругленные углы во всех браузерах

В Firefox вам нужно использовать префикс -moz-, который работает так же, как и стандартная версия CSS.

радиус границы: 20 пикселей; -moz-border-radius: 20px

Чтобы установить разные радиуса для каждого отдельного угла вашей коробки, используйте следующее:

-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft

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

.бокс-углы { радиус границы: 30px; -moz-граница-радиус: 30px; //Fire Fox -webkit-border-radius: 30px; // Хром/Сафари -khtml-граница-радиус: 30px; // Браузеры Konquerer }

Как нарисовать круг с помощью CSS?

Скопируйте и вставьте следующий исходный код на свою html-страницу, он нарисует кружок на вашей html-странице.

Круг

output

Как нарисовать затененный прямоугольник?

Свойство CSS box-shadow можно использовать для определения эффектов тени в элементе блока.

Синтаксис:

box-shadow: x y цвет радиуса размытия ;

1. x — указывает расстояние по горизонтали справа от поля.
2. y — указывает расстояние по вертикали над коробкой.
3. blur — тень будет резкой, чем выше число, тем больше и светлее будет тень.
4. радиус — Положительные значения заставят тень расширяться и становиться больше.
5. цвет — цвет тени

box-shadow: золото 10px 10px 5px;

пример

затемненная коробка

Когда вы устанавливаете отрицательные значения для x и y, тень будет рисоваться слева и выше поля.

дел { граница: 5px сплошная #4FFFA1; отступ: 30 пикселей; фон:#F6FFA1; ширина: 100 пикселей; box-shadow: -15px -15px бирюзовый; }

В приведенном выше коде x и y установлены как отрицательные значения, поэтому тень будет рисоваться слева и над прямоугольником.

Тень CSS Box с одной стороны

Вы можете нарисовать тень блока с одной стороны, используя css

Тень на нижней стороне

Тень слева

Тень справа

Тень на верхней стороне

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

-moz-box-тень -webkit-box-тень коробка-тень

17+ круглых кнопок CSS [примеры и способы создания]

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

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

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

Как сделать кнопку более округлой CSS?

См. перо на КодПене.

Чтобы создать закругленную кнопку, вы должны использовать свойство CSS border-radius .

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

Вы можете использовать любую единицу измерения CSS для свойства boorder-radius . Это могут быть пиксели, ems, rems, проценты и т. д.

Вот пример кнопки со слегка закругленными углами:

 .my-button{ 
 /* Добавление закругленных углов */ 
 border-radius: 5px; 
 граница: 1px сплошная #000; 
 отступ: 10px 20px; 
 фон: желтый; 
 размер шрифта: 2em; 
 курсор: указатель; 
 } 
 

HTML-разметка не требует ничего особенного. В этом случае мы будем использовать 9Кнопка 0128 elemen, но вы можете использовать любой другой, например div , span или p .

 Пример 

А вот кодовая ручка с примером, так что вы можете немного поиграть с ним:

См. перо на КодПене.

Открыть CodePen

Примеры круглых кнопок CSS

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

1. Круглые кнопки CSS с эффектом наведения

См. перо на КодПене.

Открыть CodePen

В нашем первом примере у нас есть классные круглые кнопки CSS, которые имеют эффект наведения на них. Они теряют сплошной цвет фона при наведении курсора, попробуйте!

Если вы думаете о добавлении эффектов наведения к своим круглым кнопкам, ознакомьтесь с этим списком 10 лучших эффектов наведения кнопок CSS

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

Кнопки сделаны с использованием тегов ссылок HTML, поэтому вы знаете, что они будут полезны с точки зрения SEO.

2. Минимальные круглые 3D-кнопки

См. перо на КодПене.

Открыть CodePen

Создан на чистом CSS (без сторонних библиотек). CSS легко понять, так как все названо соответствующим образом.

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

Стиль минималистичный и выглядит очень современно.

3. Круглая кнопка флажка CSS

См. перо на КодПене.

Открыть CodePen

Не каждая круглая кнопка CSS должна быть основным HTML-тегом ссылки, эта использует флажок в фоновом режиме и действует как тумблер.

Он трехмерный и анимируется при переключении между двумя состояниями. Это выглядит очень круто и очень увлекательно.

4. Круглая кнопка 3D CSS с галочкой

См. перо на КодПене.

Открыть CodePen

3D-кнопка HTML с галочкой внутри, после нажатия она загорается синим цветом — вы также можете изменить этот цвет, если он не соответствует вашему стилю.

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

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

5. Тонкая круглая кнопка переключения 3D (CSS)

См. перо на КодПене.

Открыть CodePen

Еще одна круглая кнопка CSS на основе флажка. Он продуманно настроен так, чтобы его можно было многократно использовать, как и в HTML, используется класс-оболочка, а структура достаточно проста.

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

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

6. Кнопка Arcade Round (CSS)

См. перо на КодПене.

Открыть CodePen

Что-то немного другое и более конкретное: великолепно выглядящая трехмерная аркадная кнопка, которая имеет классный эффект при нажатии на нее.

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

7. Значки с круглыми кнопками CSS

См. перо на КодПене.

Открыть CodePen

Круглые значки кнопок на чистом CSS с текстом и разделенным фоном между верхом и низом каждой кнопки.

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

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

8. Круглые кнопки с набивкой

См. перо на КодПене.

Открыть CodePen

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

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

9. Анимированные круглые кнопки

См. перо на КодПене.

Открыть CodePen

Два примера анимированных круглых кнопок. Первый имеет эффект ротора, внешняя обивка вращается, когда вы наводите курсор. Вторая кнопка пульсирует своей границей при наведении.

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

Анимация плавная и тонкая.

10. Анимированные круглые кнопки CSS

См. перо на КодПене.

Открыть CodePen

Минималистичные и тонкие анимированные круглые кнопки CSS со значками посередине.

Каждая кнопка также имеет собственный текст внизу. Значки красиво расположены по центру кнопки, а структура HTML чистая.

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

11. Круглые пуговицы с каймой

См. перо на КодПене.

Открыть CodePen

Набор очень простых, но эффективных круглых кнопок CSS, только чистый HTML и CSS, никаких сторонних библиотек или предварительных рендереров CSS.

Измените цвет в коде CSS, чтобы он соответствовал вашему дизайну. Они также имеют приятный тонкий эффект наведения на них.

12. Кнопки CSS «квадратный-круглый»

См. перо на КодПене.

Открыть CodePen

В этом примере показано, как можно постепенно увеличивать округлость кнопок CSS, начиная с квадрата и двигаясь к полному кругу.

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

13. Закругленные кнопки «плюс» и «минус»

См. перо на КодПене.

Открыть CodePen

Если вы ищете темные кнопки, эта кнопка для вас. У нас есть несколько кнопок «плюс» и «минус» с эффектами наведения и щелчка, очень тонкие эффекты, но не подавляющие.

И HTML, и CSS просты и понятны, отлично подходят, если вы хотите внести изменения или улучшения.

14. Плавающие круглые кнопки CSS

См. перо на КодПене.

Открыть CodePen

Здесь, в этом примере, у нас есть несколько круглых кнопок на чистом HTML и CSS, они используют тег «a», поэтому они отлично подходят для SEO.

Самое классное здесь то, что эти кнопки используют CSS float для их позиционирования, проверьте CSS, чтобы увидеть, как все это работает.

См. перо на КодПене.

Открыть CodePen

Создан с использованием фреймворка bootstrap CSS и небольшого количества jQuery для запуска всплывающей анимации для каждой кнопки.

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

Также есть несколько шестиугольных вариантов, если они вам нравятся.

16. Круглые кнопки Bootstrap (CSS)

См. перо на КодПене.

Открыть CodePen

Набор круглых кнопок, созданных с использованием CSS-фреймворка Bootstrap.

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

17. Пользовательские круглые кнопки CSS

См. перо на КодПене.

Открыть CodePen

Классный набор круглых кнопок CSS, немного деревенский. У них есть анимация при наведении и клике.

Если удерживать нажатой кнопку, кнопка перемещается дальше во время анимации.

См. перо на КодПене.

Открыть CodePen

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

Попробуйте навести курсор на каждую кнопку и посмотрите, какой у них эффект наведения.

• 20 лучших тумблеров CSS [Примеры]
• Красивые индикаторы выполнения CSS [Примеры]
• Гамбургер-меню на чистом CSS с примерами
• 20 классных вкладок HTML и CSS [примеры]

Об авторе:

Люк Эмбри — разработчик полного стека, бакалавр компьютерных наук, проживающий в Великобритании.