该方法适用于所有品牌的电脑。
css设置渐变边框设置圆角无效问题
开门见山，当我们给一个元素的边框设置渐变色，那设置圆角就没有效果，以输入框为例:
html:
<input type="text">
css:
input{
outline: none;
background: #fff;
width: 700px;
height: 50px;
border:2px solid;
border-image:linear-gradient(138deg, red, blue) 2 2;
border-radius: 5px;
}注意，border属性要写在border-image前面，不然没有渐变效果。已经设置了圆角，但是实际上确没有显示:
解决方法为给元素包上一层父元素，设置父元素的背景色为同样的渐变色，把圆角设置在父元素上，通过padding达到边框的效果，下面看看改造后的效果:
html:
<div class="box">
<input type="text">
</div>
css:
.box{
width: 700px;
height: 50px;
background-image: linear-gradient(to right, red, blue);
border-radius: 5px;
padding: 2px;
box-sizing: border-box;
}
input{
outline: none;
background: #fff;
border:none;
width: 100
height: 100
box-sizing: border-box;
}效果：
可以看到圆角已经出现，输入框设置box-sizing: border-box;是因为input本身带有padding。
以上就是css圆角边框不起作用怎么办的详细内容，更多请关注易知道|edz.cc其它相关文章！
