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

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

/*
Пути к изображениям

img/rope-frame.png
img/keks-2.jpg
img/eye-patch.svg

*/

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

не появилась((

22

Поменять местами нужно border-image-source и border.

23

image
image.jpg1360×768 435 KB

Извиняюсь, но у меня не получается. Я поменял местами, задал невидимый цвет бордюру. Но у меня с невидимым цветом и кот не круглый и и круглая каемочка не появилась

24

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

25

Спасибо! Я понял почему у меня изображение было квадратным и кажется понял почему не появилась каемочка в последний раз. Спасибо еще раз

26

Рада помочь :wink:

27

Ммм у меня 98% что то ему канат (рамка) не нравиться, хз как его поправить:

.portrait {
  margin: 0 auto;
  width: 275px;
  height: 275px;
  background: url('img/eye-patch.svg'), url('img/keks-2.jpg') no-repeat 50% 50%;
  background-repeat: no-repeat;
  background-size: 80px, 70%;
  background-position: 85px 40%, 50% 50%;
  border-image: url('img/rope-frame.png');
  border-image-slice: 0 fill;
  border-radius: 50%;
  border-image-repeat: round;
  background-clip: content-box;
  padding:50px;
}
28

100%
.portrait {
width: 275px;
height: 275px;
margin: 0px auto;

 background: 
    url(img/eye-patch.svg) no-repeat 35px 35px,
    url("img/keks-2.jpg") center no-repeat;
 background-size: 80px, cover;
 background-clip:content-box;

 border: 50px solid;
 border-radius:50%;
 border-image:url(img/rope-frame.png);
 border-image-slice:90 fill;

}

1 лайк
29

100%

/*
Пути к изображениям

img/rope-frame.png
img/keks-2.jpg
img/eye-patch.svg

*/

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

2 лайка