Рамка для изображения на 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;  } .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