Рамка для изображения на CSS

stream · 10.09.20

Рамка для изображения на CSS

В секции <head><style> пишем код CSS:

CSS:

 .border {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
    outline: 1px solid #fff; /* Параметры рамки */
   }
   .border, .border::after {
    padding: 4px; /* Толщина внутренней рамки */
    background: #dad6cf; /* Цвет внутренней рамки */
    border: 2px solid #c2b59d; /* Параметры рамки */
    box-sizing: border-box; /* Не учитываем padding */
   }
   .border img { display: block; }
   .border::after {
    content: ''; /* Выводим рамку */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; top: 0; /* Положение */
    width: 100%; height: 100%; /* Размеры */
    z-index: -1; /* Опускаем вниз */
    transform: rotate(-7deg); /* Поворачиваем */
   }

В теле документа <body> пишем HTML-код:

HTML:

  <figure class="border">
   <img src="image/b-52.jpg" alt="Б-52" width="150" height="150">
  </figure>

Получается изображение вот с такой симпатичной рамкой:

Рамка для изображения на CSS

stream

Support