Испытание: морской волк [24/33] 95%

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

Помогите, пожалуйста! Вроде все сделала правильно, но изображение рамки никак не хочет становиться вокруг изображение (остается по углам)…
А в мини-браузере на моем компьютере отображается только ее часть (но это, как я понимаю, не такая уж и проблема, нужно смотреть на вкладку “Результат”, хотя это и доставляет определенные неудобства)

.portrait {
    width: 275px;
    height: 275px;
    margin: auto;
    border: 50px solid transparent;
    background-image: 
        url("img/eye-patch.svg"),
        url("img/keks-2.jpg");
    background-repeat: 
        no-repeat;
    background-position: 
        35px 35px,
        50% 50%;
    background-size: 
        80px,
        cover;
    background-clip: content-box;
    border-radius: 50%;
    border-image-source: url("img/rope-frame.png");
    border-image-slice: 90px fill;
}

24_33
24_33.png584×718 580 KB

2

В строке
border-image-slice: 90px fill;
нужно убрать px, тогда будет все ок.

У меня была проблема: слишком маленькая ширина границы, поэтому изображение рамки видимо выезжало за пределы бордера, потому что становилось невидимым.

1 лайк
3

Спасибо огромное! Помогло, теперь 100% :grinning: