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


image.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; }

效果:


image.png

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

作者微信:Promise_fulfilled

你可能感兴趣的:(css设置渐变边框设置圆角无效问题)