Question

Instead of square I want it around the image

所以我想将红色圆形边框更改为图像。但是它不断以正方形或矩形的形式出现。

我设法找到了这个jsfiddle，并对其进行了修改，以显示什么是going wrong

.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网址。

Answer 1

添加了box-sizing属性，以确保边框大小和填充/边距不会成为问题
边界半径必须是宽度和高度的一半，再加上您必须始终声明宽度和高度。
这里是修改后的工作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" />

Answer 2

请参阅此链接以获取详细信息，
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 3

我认为按照W3c规范这是不可能的，如果您通过Photoshop创建带有圆形图案的图像，然后添加该图像，我认为效果更好。

圆形图像边框，而不是正方形

3 个答案: