html圆角边为什么不圆,css圆角边框不起作用怎么办

5fafb46103b77510.jpg该方法适用于所有品牌的电脑。

css设置渐变边框设置圆角无效问题

开门见山,当我们给一个元素的边框设置渐变色,那设置圆角就没有效果,以输入框为例:html:

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前面,不然没有渐变效果。已经设置了圆角,但是实际上确没有显示:

1605350516879832.png

解决方法为给元素包上一层父元素,设置父元素的背景色为同样的渐变色,把圆角设置在父元素上,通过padding达到边框的效果,下面看看改造后的效果:html:

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;

}

效果:

1605350521654056.png

可以看到圆角已经出现,输入框设置box-sizing: border-box;是因为input本身带有padding。

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值