В продолжении темы Полупрозрачная рамка внутри картинки —
а если нужна рамка с закругленными углами, или полностью круглая, т.е. прямоугольное фото центр чистый, остальное пространство занято полупрозрачной рамкой, внутренняя часть в виде круга?
Ответ
Можно и на изи без SVG..
.img-block {
display: block;
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
.img-block img {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.img-block .border {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 0 100px rgba(255, 0, 0, .5);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
Комментариев нет:
Отправить комментарий