border-image与border-radius不兼容，你造吗？

本贴分享歌曲：追梦人 - 阿木

> 让青春吹动了你的长发让它牵引你的梦
> 不知不觉这红尘的历史已记取了你的笑容
> 红红心中蓝蓝的天是个生命的开始
> 春雨不眠隔夜的你曾空独眠的日子
> 让青春娇艳的花朵绽开了深藏的红颜
> 飞去飞来的满天的飞絮是幻想你的笑脸
> 秋来春去红尘中谁在宿命里安排
> 冰雪不语寒夜的你那难隐藏的光采
> 看我看一眼吧 莫让红颜守空枕
> 青春无悔不死 永远的爱人
> 让流浪的足迹在荒漠里写下永久的回忆
> 飘去飘来的笔迹是深藏的激情你的心语
> 前尘红世轮回中谁在宿命里徘徊
> 痴情笑我凡俗的人世终难解的关怀
> 看我看一眼吧 莫让红颜守空枕
> 青春无悔不死 永远的爱人
> 让青春吹动了你的长发让它牵引你的梦
> 不知不觉这红尘的历史已记取了你的笑容
> 红红心中蓝蓝的天是个生命的开始
> 春雨不眠隔夜的你曾空独眠的日子

哈哈哈，实在是忍不住想分享最近循环听的这首老歌，歌词写的实在是太美了，所以更没忍住全都copy至上。也真是想不到唱“有一种爱叫做分手”的嗓音唱这首老歌也是那么好听，对我胃口！想当初听他那首火爆歌曲的时候，我刚读初一，当时只听过那首歌曲。如今，弹指一挥间已过十四年，才发现听的“追梦人”正是他当初的同张专辑。

好啦，跑题至此为止吧！开始记录最近遇到的问题。

border-image 不兼容 border-radius

最近项目遇到的一个问题就是实现如下设计师提供的效果图-选中按钮时圆变径向圆，可是根据设计图提供的代码死活都无法实现效果，圆角属性 border-radius 不起作用变成了径向方块了。

设计稿：

根据设计稿，boder-image与border-radius一起使用的效果如下:

对啊，我当时也在想那个效果图是个什么鬼，问题困扰我这个菜鸟几天了，也只有周末有这个时间来解决它。

方案如下：

给原先添加上述属性的标签 van-radio__icon--checked 再添加一个子块级标签 activeIcon

原标签（如今的父级标签）：

1. 将 border-image 改写成 background-image，值不变；
2. 添加内边距 padding；

子标签：代码如下

 .van-radio__icon--checked {    

    box-sizing: border-box;    
    padding: .08rem;    
    border-radius: 50%;    
    background-image: linear-gradient(to bottom, #efcea6, #dab591);   
 
   .activeIcon {     
      width: 100%;      
      height: 100%;      
      border-radius: 50%;      
      background: #2f2f34;    
   }  
}  
复制代码

最终效果图：