css渐变实现border部分显示

Rulelur

于 2021-10-12 22:47:34 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/Rulelur/article/details/120734065

本文介绍了如何利用CSS的`border-image-source`和`linear-gradient`属性来创建一个从左到右渐变的边框，并通过将部分颜色设置为透明，实现边框在特定位置的隐藏，例如隐藏左边50%的边框。这种方法提供了一种灵活的视觉效果，适用于网页设计中的创新元素装饰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用渐变可以让border在某个百分比变色，把其中一个改为透明即可隐藏部分border

#grad1 {
  height: 200px;
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, red 0, red 50%, green 50%, green 100%);
}

隐藏左边50%的border

#grad1 {
  height: 200px;
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, red 0, red 50%, transparent 50%, transparent 100%);
}