解决渐变色和border-radius的兼容性问题


实现带圆角的渐变边框（border-image和border-radius不能同时生效问题）

  • 已知，border-image可以给边框设置渐变效果，border-radius可以设置圆角。
  • 然而这两个是不能一起使用的；

那我就换一个思路，思路的原理是： 两个div。第一个div设置大一点。第二个img设置小一点，用padding顶一下，就会出现圆色的边框线：具体实现的思路，请往下看：

1
2
3
4
5
6
7
8
 <!-- 头像 -->
      <div class="headSculpture">
        <img
          src="//i2.wp.com/profile.csdnimg.cn/B/B/C/2_weixin_46174785"
          class="headSculptureImg"
          alt=""
        />
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  .headSculpture {<!-- -->
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
    border-radius: 50%;
    padding: 2px;
    background-image: -webkit-linear-gradient(
      31deg,
      rgba(12, 133, 191, 1),
      rgba(191, 15, 34, 1)
    );
    .headSculptureImg {<!-- -->
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

效果是:
在这里插入图片描述