圆形图像边框而不是方形

Question

我希望它在图像周围而不是正方形

所以我想把我的红色圆形边框变成图像。 但是它一直以正方形或矩形的形式出现。

我已经设法找到了这个jsfiddle并对其进行了修改以显示出了什么问题

.line {
z-index: 10;
border: 12px solid #FF0000;
/*border-image:  url('https://i.pinimg.com/originals/3c/bf/5e/3cbf5eabbde02cad7a36c47d408b5e58.jpg') 360 round;*/
border-radius: 50%;
}

我希望让边框图像环绕内部圆形图像，而不是我得到柱子或正方形/矩形。

编辑：建议的副本主要侧重于在边框内添加渐变。我只是想在边框顶部覆盖我的 imge url。

Answer 1

有关详细信息，请参阅此链接 https://jsfiddle.net/jignashagpatel/q2uvapLc/2/

.avatar{
background-image: url('https://www.w3schools.com/cssref/border.png');
padding: 15px;
border-radius: 50%;
background-repeat:repeat;
}
<img class="avatar" src="http://cs409019.vk.me/v409019863/1b6/09FPiv6Nr5A.jpg" >

Answer 2

• 添加了框大小属性，以确保边框大小和 填充/边距不会成为问题
• 边框半径必须是宽度和高度的一半，加上您必须 始终声明宽度和高度。
• 这是修改后小提琴中的工作 CSS 编辑：你能澄清你的分离(渐变(问题吗？

.avatar { 
width: 128px;
height: 128px;
margin: 10px;
border: 10px solid red;
border-radius: 50%;
box-sizing: border-radius;
}

<img class="avatar" src="http://cs409019.vk.me/v409019863/1b6/09FPiv6Nr5A.jpg" />