关于css3:borderimage与borderradius不兼容你造吗

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

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

哈哈哈，切实是忍不住想分享最近循环听的这首老歌，歌词写的切实是太美了，所以更没忍住全都 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;    
   }  
}  
复制代码 

最终效果图：