2021-01-19

border-image与border-radius不兼容，你造吗？
本贴分享歌曲：追梦人 - 阿木

歌曲链接：https://music.163.com/#/song?id=60398

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

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

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

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

设计稿：

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

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

方案如下：
给原先添加上述属性的标签 van-radio__icon–checked 再添加一个子块级标签 activeIcon

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

将 border-image 改写成 background-image，值不变；

添加内边距 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;
}
}
复制代码
最终效果图：