24/33 Решил, но нифига не понял

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

про border-image-slice вообще непонятно, его методом тыка делать что ли?
Пока самая сложная для моего понимания тема.

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

Советую повторить и причитываться, и зарисовывать то что объясняют. Я со второго раза понял тему полностью.

3

раз понял объясни почему у border-image-slice размер 90

4

Нужен пример, а доступа к заданию нету) курсы прошел подписку не оформлял) Пройди тренировочное задание по этому свойству еще раз, там все доступно

5

Объясняю по картинке (для начала, в курсе говорится, что картинку нельзя закруглить, поэтому она вставляется как прямоугольная, но уже на ней закруглённая рамка):

  • чёрные квадраты это slice 90px они ставятся по углам рамки (сама рамка размером 500х500px)
  • красный прямоугольник - между чёрными квадратами. размеры не задаём, так как он растягивается уже как нужно
  • ну и зеленый - поверх кота flip
6

Только вот как в задании узнать каков размер .jpg этой рамки? Как понимать сколько нужно в slice задавать? На глазок типо? И почему именно border-image-slice именно 90, а не 100?

7

Почему именно 90, я, уверен, достаточно точно описал и нарисовал выше. Если будет 100, то измениться соотношение сторон этой картинки и некорректно будет отображаться. Некорректно, я имею ввиду, что в какой-то части рамки картинка либо растянется, либо начнётся повторение, либо ещё как-то (по-умолчанию не помню как).

В испытаниях нам дают картинку как должно быть и мы должны к этому результату прийти: где-то тени, где-то размер шрифта, цвета и т.д. Поэтому да, “типо на глазок”, как и все другие испытания.

А если интересно посмотреть размер картинки, то в коде можно просмотреть путь к картинке, но это лишнее и ненужная в задании информация.

8

И чем же принципиально отличаются slice 90 от slice 100.

9

Вы издеваетесь, что-ли? подставьте и проверьте. Написал, же, что некорректно отображаться будет. Для наглядности увеличивайте slice.
Ширина вашго border-a не меняется вместе со slice и в ширину бордера (и его углов) вы запихиваете скажем так: “больше пикселей”. У вас радиус стоит 50% и даже с вашим 100 slice картинка уже обрезается