乐趣区

关于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;    
   }  
}  
复制代码 

最终效果图:

退出移动版