Фон и рамки

Фон и рамка — то, что превращает голый текст в карточку, кнопку или баннер. Фоном может быть не только цвет, но и картинка, а рамка бывает разной толщины, вида и формы.

Фоновая картинка

background-image кладёт картинку под содержимое элемента. Путь к файлу пишут в url(), как в атрибуте src, например url("images/sky.jpg"). Здесь картинка — маленький рисунок SVG, встроенный прямо в CSS:

<style>
  .dots {
    height: 100px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='4' fill='orange'/></svg>");
  }
</style>
 
<div class="dots"></div>

По умолчанию картинка повторяется по горизонтали и вертикали, пока не заполнит весь блок, — поэтому кружок превратился в узор.

Повтор и размер

background-repeat: no-repeat выключает повтор. background-size задаёт размер картинки: cover растягивает её так, чтобы закрыть весь блок (края могут обрезаться), а contain — так, чтобы картинка поместилась целиком:

<style>
  .pic {
    height: 90px;
    margin-bottom: 8px;
    background-color: lightcyan;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='skyblue'/><circle cx='75' cy='18' r='10' fill='gold'/><rect y='45' width='100' height='15' fill='seagreen'/></svg>");
    background-repeat: no-repeat;
  }
  .cover { background-size: cover; }
  .contain { background-size: contain; }
</style>
 
<div class="pic cover"></div>
<div class="pic contain"></div>

Верхний блок полностью закрыт картинкой, в нижнем она видна целиком, а по бокам остался цвет фона.

Положение фона

background-position двигает картинку внутри блока: center, top, right bottom или точные значения в пикселях и процентах. Обычно её пишут вместе с cover, чтобы при обрезке оставалась видна главная часть:

<style>
  .hero {
    height: 80px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18' fill='tomato'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    background-color: mistyrose;
  }
</style>
 
<div class="hero"></div>

Все эти свойства можно записать одним сокращённым свойством background, например background: lightcyan url("sky.jpg") center / cover no-repeat.

Виды рамок

Вид линии рамки задаёт второе слово в border. Рамку можно нарисовать и с одной стороны — border-left, border-bottom:

<style>
  p { padding: 6px; }
  .solid { border: 3px solid teal; }
  .dashed { border: 3px dashed teal; }
  .dotted { border: 3px dotted teal; }
  .quote { border-left: 4px solid gold; }
</style>
 
<p class="solid">solid — сплошная</p>
<p class="dashed">dashed — штрихи</p>
<p class="dotted">dotted — точки</p>
<p class="quote">Рамка только слева — так часто оформляют цитаты.</p>

Скруглённые углы

border-radius скругляет углы. Работает и без рамки — скругляется фон. Значение 50% у квадрата даёт круг:

<style>
  .card { padding: 12px; background: lavender; border-radius: 12px; margin-bottom: 8px; }
  .circle { width: 60px; height: 60px; background: coral; border-radius: 50%; }
</style>
 
<div class="card">Карточка со скруглёнными углами</div>
<div class="circle"></div>

Outline

outline похож на рамку, но рисуется снаружи и не занимает места: соседние элементы не сдвигаются. Браузер показывает его вокруг элемента, выбранного с клавиатуры:

<style>
  .o { padding: 8px; outline: 3px solid gold; outline-offset: 4px; }
</style>
 
<p class="o">Контур снаружи, с промежутком 4px</p>

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

Частая ошибка

Рамка без вида линии не появится: по умолчанию вид — none, то есть «нет рамки». Толщины и цвета мало:

<style>
  .a { padding: 6px; border: 2px crimson; }
  .b { padding: 6px; border: 2px solid crimson; }
</style>
 
<p class="a">border: 2px crimson — рамки нет</p>
<p class="b">border: 2px solid crimson — рамка есть</p>

Спасибо, что читаете!