CSS实现渐变圆角边框

渐变边框可以使用 border-image,但带有圆角的渐变边框单靠 border-image却无法实现,那有哪些方法可以实现 圆角渐变边框呢?

css实用小知识,你肯定用得上

方案一:使用border-image+clip-path实现

CSS实现渐变圆角边框_第1张图片

 

border-image

+

clip-path

实现

优点是内容背景可以透明

方案二:background-image+background-clip实现



background-image

+

background-clip

实现

缺点:

  • 内容背景不能半透明
  • 实现复杂
  • 不能使用padding

方案三:border-image+overflow: hidden实现

CSS实现渐变圆角边框_第2张图片



border-image

+

overflow: hidden

实现

缺点:需要多嵌套一层父元素,并且还需要设置overflow: hidden;

方案四:background-image+父div实现



background-image

+

父div

实现

这个缺点和方案三一样

你可能感兴趣的:(web前端,css,html)