Создание скругленной изнутри рамки

2 декабря 2018 | Опубликовано в css | Нет комментариев »

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

Это будет первый вариант:

Но если нам не хотелось бы использовать дополнительный элемент только для создания определенного внешнего вида, можно использовать свойство изображения рамки на элементе <body>. Изображение рамки — это просто девять частей, которые масштабируются по необходимости. Четыре фиксированных угла, четыре повторяющихся по одной оси стороны и тянущаяся средина:

Нужный код CSS очень простой:

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}

Обратите внимание, что все версии браузера Internet Explorer не поддерживают свойство изображения рамки.

Прокрутка

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

Нам только надо задать, чтобы размер элементе <body> был размером как минимум с окно браузера, но он может быть и больше:

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 25px;
}

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

body {
  background: #5bb0ff;
}

.page-wrap {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  overflow-y: scroll;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

Это все, надеемся, этот урок показал Вам интересные возможности создания необычных рамок и это вдохновит вас на эксперименты.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

Опубликовано в css, декабря 2, 2018
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Коментарии запрещены.

Создание скругленной изнутри рамки

Прокрутка

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые