/*
Пути к изображениям
img/rope-frame.png
img/keks-2.jpg
img/eye-patch.svg
*/
.portrait {
width: 275px;
height: 275px;
margin: 0 auto;
border-radius: 50%;
background-image: url(“img/eye-patch.svg”),url(“img/keks-2.jpg”);
background-size: 80px,cover;
background-repeat: no-repeat;
background-position: left 35px top 35px, center;
border: 50px solid rgba(0, 0, 0, 0.4);
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 90 fill;
background-clip: content-box;
}
Все сделал, но хотелось бы разобраться.
После добавления border-image перестает работать свойство border-radius.
Это ладно, как я понял, он работает только с прямоугольными объектами.
Но я не понимаю, за счет чего добавление background-clip: content-box; Помогает исправить ситуацию.
Да, мы обрезали картинку, но как она стала рамкой то.
Надеюсь, мой вопрос будет понятен.
После добавления border-image перестает работать свойство border-radius.
Все работает, одно другое не выключает.
Но я не понимаю, за счет чего добавление background-clip: content-box; Помогает исправить ситуацию.
К сожалению код в неудобочитаемом виде. поэтому я его смотреть не буду. скажу только, что я сделал задание без использования background-clip: в любом из его сочетаний
Да, мы обрезали картинку, но как она стала рамкой то.
Клипуем(обрезаем) мы не картинку рамки, а картинку фона. Картинку рамки мы слайсуем - режем на куски, на 9 частей. Серединка (9ая) часть в нашем случае нам не нужна. Уголовые отрезки(4шт) остаются как есть масштабируясь по ширине ободка нашего бордюра, например
border: 70px solid transparent;
значит угловые отрезки станут шириной 70 пикселей
, а еще 4 грани(edges) растягиваются, повторяются, округляются или пробеливаются равномерно ну и тоже прилипают к ширине бордюра
[ stretch | repeat | round | space ]
.