[24/30] Вопрос по заданию

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

Помогите найти ошибку.
Окно показывающее результат не очень корректно работает, при сравнении показывает, что между углами рамки есть небольшое расстояние. Откуда оно появляется?

.portrait {
margin: 0 auto;
width: 275px;
height: 275px;
padding: 50px;
background-image: url(‘img/eye-patch.svg’),
url(‘img/keks-2.jpg’);
background-position: 84px 84px,center;
background-repeat: no-repeat,no-repeat;
background-size: 30%,70%;
background-clip: content-box;
border-radius: 50%;

border-image-source: url(‘img/rope-frame.png’);
border-image-slice: 50% fill;
border-image-repeat: round;
border-image-width: 100%;
}

%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5
изображение.jpg706×884 267 KB

2

я думаю, что появляется из вот этого свойства

Свойство border-image-slice подсказывает браузеру, как разрезать картинку, для размещения её в рамке. В вашем случае (если задано 50%), картинка разрезается на четыре части, которые браузер размещает по углам рамки - и между углами остается “пустота”. Если бы border-image-slice было меньше 50%, то нарезка шла бы на 9 квадратов: четыре из них использовались бы для заполнения углов, один для центра (т.к. у вас указано fill), а ещё четыре для заполнения сторон между углами рамки (см. https://htmlacademy.ru/courses/88/run/14).
Попробуйте подобрать значение в пикселях и меньше половины размера картинки.

И, кстати, чтобы задавать фоновую картинку для рамки, рамка должна иметь ширину - а она у вас нигде не прописана.

1 лайк