我有一个问题,我想要一个圆形的渐变边框,但显然 border-radius 不适用于 border-image。
我附上了结果,我希望方形边框变圆。
先谢谢你。
.luna-icon-wrap{
float: right;
padding: 5px 5px;
-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% 50%;
border-radius: 50% 50%;
border: 2px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
.luna-featbox2-icon{
width: 70px;
height: 70px;
text-align: center;
-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% 50%;
border-radius: 50% 50%;
background: #43257f; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #43257f, #40c4ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #43257f, #40c4ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #43257f, #40c4ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #43257f, #40c4ff); /* Standard syntax */
}
<div class="luna-icon-wrap">
<div class="luna-featbox2-icon">
<i class="fa fa-diamond"></i>
</div>
</div>
最佳答案
我建议您使用 SVG
来创建这个形状。它提供简单性和可扩展性。
我们可以使用 SVG
的 circle
元素创建一个像上面那样的形状,并用一些纯色、渐变或图案填充/描边它。
以下代码将创建圆形:
<circle cx="50" cy="50" r="39" fill="blue" />
下面是上面代码中使用的参数的简要说明:
cx
定义圆的x
位置。cy
定义圆的y
位置。r
定义圆的半径。
要用渐变填充闭合形状,我们需要创建一个渐变对象:
<defs>
<linearGradient id="grad1" x1="1" y2="1">
<stop offset="0" stop-color="#3acfd5" />
<stop offset="1" stop-color="#3a4ed5" />
</linearGradient>
</defs>
这个对象可以通过形状中的 fill
和 stroke
属性使用 id
来引用,比如 fill="url(#grad1 )
或 stroke="url(#grad1)
。而渐变的方向可以通过它的x1
、y1
、x2
和y2
属性来控制。
输出图像:
工作示例:
<svg width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="1" y2="1">
<stop offset="0" stop-color="#3acfd5" />
<stop offset="1" stop-color="#3a4ed5" />
</linearGradient>
<linearGradient id="grad2" y2="1">
<stop offset="0" stop-color="#43257f" />
<stop offset="1" stop-color="#40c4ff" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" fill="none" stroke="url(#grad1)" stroke-width="2" />
<circle cx="50" cy="50" r="39" fill="url(#grad2)" />
</svg>
有用的资源:
下面是 SVG
的一些有用链接:
关于html - 带有渐变颜色的圆形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46931009/