boder渐变色

1、用border、border-image、linear-gradient

<div class="content"></div>

.content {
        width: 100px;
        height: 100px;
        border: 4px solid blue;
        border-image: -webkit-linear-gradient(red, yellow) 30 30;
        border-image: -moz-linear-gradient(red, yellow) 30 30;
        border-image: linear-gradient(red, yellow) 30 30;
        /* border-radius: 50%; */   /*不生效*/
      }

2、border-image无法实现圆角，所以换一个思路：通过padding来实现，给父节点设置渐变背景，通过padding模拟边框（此处的padding值就是border需要的值），注意父元素和子元素的border-radius属性值保持一致。

<div class="_content">
      <div class="box"></div>
  </div>

._content {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        padding: 5px;
        border-radius: 50%;
        background-image: -webkit-linear-gradient(
          top,
          red 0%,
          blue 30%,
          yellow 60%,
          green 90%
        );
        background-image: -moz-linear-gradient(
          top,
          red 0%,
          blue 30%,
          yellow 60%,
          green 90%
        );
        background-image: linear-gradient(
          top,
          red 0%,
          blue 30%,
          yellow 60%,
          green 90%
        );
      }
      .box {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #fff;
      }

如果没有box