圆形边框与渐变颜色

Question

我有一个问题，我希望有一个圆角渐变边框，但显然 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>

Answer 1

我建议您使用SVG创建此形状。它提供简单性和可扩展性。

我们可以使用SVG＆＃39; 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属性来控制。

输出图片：

工作示例：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有用的资源：

以下是SVG的一些有用链接：

• Specification
• MDN

Answer 2

这可以通过CSS使用像:before这样的伪类来实现。

可悲的是，它没有边框和圆圈之间的透明部分，但是如果你知道它总是在某个彩色背景上，那不应该是一个问题。

＆＃13;

＆＃13;

.luna-icon-wrap{
  float: right;
  padding: 1px 1px;
  -webkit-border-radius: 50% 50%;
  -moz-border-radius: 50% 50%;
  border-radius: 50% 50%;
  border: 2px solid transparent;
  position: relative;
}	
.luna-icon-wrap:before {
content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e5799 0%,#7db9e8 100%);
  z-index: -2;
}

.luna-featbox2-icon{	
  width: 70px;
  height: 70px;
  text-align: center;
  -webkit-border-radius: 50% 50%;
  -moz-border-radius: 50% 50%;
  border-radius: 50% 50%;
  border: 4px solid white;
  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 */
}

＆＃13;

<div class="luna-icon-wrap">
  <div class="luna-featbox2-icon">
    <i class="fa fa-diamond"></i>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;