Рамки и фоны, часть 2 / Испытание: морской волк

Курсы §30. Рамки и фоны, часть 2
1

Наверное самое сложное и непонятное задание которое попалось в курсах. Решил простым перебиранием свойств, но никак не общим пониманием. Как вообще высчитывать эти border-image-slice в этом задании? На глазок?

Ну и сам вопрос по заданию, почему пропадает рамка если добавляю второй фон?

.portrait {
position: absolute;
left: 50%;
top: 40px;
margin-left: -85px;
width: 220px;
height: 220px;
background-image: url(img/eye-patch.svg),
url(img/keks-2.jpg);
background-position: 35px 37px, center;
background-repeat: no-repeat, no-repeat;
background-clip: content-box;
background-size: 85px,cover;
border-radius: 50%;
border: 20px solid transparent;
border-image-source: url(img/rope-frame.png);
border-image-slice: 35 fill;
border-image-outset: 30px;
}

Вообще часто ли эти свойства применяются на практике?

2

Привет. В этом задании да, надо всё подобрать «на глазок». Свойства довольно специфичные, так что применяются нечасто.

По поводу вопроса: попробуйте убрать отступ border-image-outset: 30px;, когда добавлен второй фон. В общем, рамка-картинка просто уезжает за пределы скруглённой рамки. Это поведение сейчас есть в Хроме, оно появилось недавно и не совсем правильное, как мне кажется.