css3 怎么实现border-image圆角的问题

.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不能实现圆角功能么

已邀请:

liuxiuming

赞同来自:

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

lvzq2016

赞同来自:

<div class="border">
112233
</div>
.border{
  position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
.border::after{
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

weixiaozhuo123

赞同来自:

用background:linear-gradient和before,组合出来楼主要的效果,楼主说的那种非圆角的可能会实现,圆角的好像就不行了
.borders{

clear:both;
width:100px;
height:100px;
border:6px solid #F33;
margin:20px auto;
background:linear-gradient(to top, red, orange, yellow);
position:relative;

}
.borders::before{

content:"";
width:88px;
height:88px;
position:absolute;
top:6px;
left:6px;
z-index:10;
border-radius:15px;
background-color:#6CF;

}

要回复问题请先登录注册