【CSS】条纹背景

最新推荐文章于 2025-05-07 15:31:32 发布

原创最新推荐文章于 2025-05-07 15:31:32 发布 · 413 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

当前文章被收录于：

css

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何使用CSS创建不同方向的条纹背景，包括横条纹、竖条纹和斜条纹，并探讨了实现灵活的同色系条纹的方法。

代码地址

横条纹

<div class="container tiaowen1"></div>

.container {
  width:100%;
  height:100vh;
}
.tiaowen1 {
  background:linear-gradient(pink 50%,#000 50%);
  background-size:100% 20%;
}

竖条纹

<div class="container tiaowen2"></div>

.container {
  width:100%;
  height:100vh;
}
.tiaowen2 {
  background:linear-gradient(90deg, pink 50%,#000 50%);
  background-size:20% 100%;
}

斜条纹

<div class="container tiaowen3"></div>
<div class="container tiaowen4"></div>

.tiaowen3 {
  background:linear-gradient(45deg,pink 25%,#000 0,#000 50%,pink 0,pink 75%,#000 0);
  background-size:100px 100px;
}
.tiaowen4 {
  background:repeating-linear-gradient(60deg,pink,pink 10%,#000 0,#000 20%)
}

灵活的同色系条纹

.tiaowen5 {
  background:pink;
  background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 10%,transparent 0,transparent 20%)
}