html5 - css3 怎么实现border-image圆角的问题
大家讲道理
大家讲道理 2017-04-17 13:40:45
0
5
1112

.border {
    width: 100px;
    height: 100px;
    background: #6CF;
    border: 6px solid #F33;
    margin: 20px auto;
    border-image: linear-gradient(to top, red, orange, yellow) 6;
    -moz-border-radius: 15px 25px !important;
    -webkit-border-radius: 15px 25px !important;
    border-radius: 15px 25px !important;
}

用border-image写了一个渐变,同时想要写一个圆角,写了border-radius但是并无作用,border-image不能实现圆角功能么

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(5)
迷茫

雷雷 雷雷

大家讲道理


我个人的理解是,1,border-radius是一个边框的样式,当没有边框的时候会作用到背景上。

2.border-image也是边框的一个属性,但是一旦这个属性无法显示才会显示border的默认样式,例如

border:15px solid #F33;

所以一旦有了border-image,浏览器应用了之后,这是为什么有了border-image之后border-radius和border不显示的原因。
3.如果想要同时拥有这两种样式,我支持楼上的两位大神的做法~因为鱼和熊掌不可兼得。
以上,是我的个人看法~如有不正之处,请指正谢谢。
附:我查阅资料的一个网站 border-image

洪涛

再嵌套一层,设置外层的圆角 + overflow:hidden

刘奇

.边框{

雷雷

}
.border::after{

雷雷

}

巴扎黑

border-radius
这个可以吧 我映象中一直用这个

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板