Не понимаю механизм "скругления" изображения 23/33

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

А мне вот непонятно, почему картинка Кекса после background-clip становится круглой… Как я вижу, в блоке .portrait НЕТ внутренних отступов. Т.е. есть содержимое блока - это сама картинка Кекса и рамка border (как полупрозрачная вуаль) - до непрозрачной белой outline. И вот наступает команда “обрезать лишний фон” по content-box. Как было сказано в начале этого раздела, background-clip по умолчанию имеет border-box. Если мы обрезаем картинку по content-box, значит, грубо говоря (не точно, но, надеюсь, смысл понятен) отвалятся padding, т.е. та часть картинки, которая их прикрывала. Однако в данном случае у нас padding равны 0, так что, как Я понимаю, обрезка по padding-box (на по внутренней границе рамки) и по content-box должны совпадать, т.к. между ними нет padding. Таким образом, изображение измениться не должно!! А оно скругляется… И если ещё не завадать fill, то видно, что внутри изображения есть какой-то ещё прямоугольный блок, который в итоге, после обрезки, и даёт круглое изображение! Что за он?? Да, и ещё, в border-image-slice, эта величина обрезки, как понять, как она соотносится с размером картинки? Где этот размер указан?

2

Уже разобрался, ответ не нужен.

3

Добрый день!
Урок 23\33
Подскажите, что я ниже в коде неправильно делаю?
Не могу понять, почему первое и последнее задание не выполняются?
Задал скругление, убрал outline, но все равно не удовлетворяет выполнение задания.

.portrait {
width: 300px;
height: 300px;
margin: 50px auto;
border: 50px solid rgba(0, 0, 0, 0.4);
border-image-source: url("img/leafs-frame.png");
border-image-slice: 180 fill;
background: url("img/keks-3.jpg") center no-repeat rgba(255, 255, 255, 0.4);
border-radius: 50%;
background-clip: content-box;
background-size: cover;

}

4

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

1 лайк
5

Я использую Firefox 50.1.0 (Linux)
А вы какой браузер используете?

6

у меня хром

1 лайк
7

Сделал через Chrome и все заработало. Все задания выполнены.
Спасибо за быстрый отклик, вы мне очень помогли :slight_smile: