如何使用css创建类似水平线的条形码（用于电子邮件）

我想用css创建如下图所示的水平线。但由于无法创建这样的行，我在使用css之前从未见过这样的行。 在css中导出的任何人都可以帮助我吗

我知道基本知识

更新

---

注意：事实上，我必须把它放在我的电子邮件模板中，所以我避免使用图像。我评论了纯css，但是，使用垂直管道（

|

）然后使用css字体技术控制它们的大小/颜色/间距似乎是可行的。我将发布一些示例。我不清楚是否需要使用纯css

span{display:block；}
.a{颜色：蓝色；字体大小：2em；字母间距：.2em；}
.b{颜色：红色；字体大小：1em；字母间距：2px；}
.c{颜色：绿色；字体大小：8px；字母间距：1px；}

---

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

我发表了评论，但似乎可以使用垂直管道（

|

），然后使用css字体技术控制其大小/颜色/间距。我将发布一些示例。我不清楚是否需要使用纯css

span{display:block；}
.a{颜色：蓝色；字体大小：2em；字母间距：.2em；}
.b{颜色：红色；字体大小：1em；字母间距：2px；}
.c{颜色：绿色；字体大小：8px；字母间距：1px；}

---

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

我能想到的唯一CSS是一个拉伸的（）虚线边框：

div{
边框底部：1px点黑色；
变换：比例（1,10）；
}

---

我能想到的唯一CSS是一个拉伸的（）虚线边框：

div{
边框底部：1px点黑色；
变换：比例（1,10）；
}

如果是电子邮件（请参阅评论部分）：

使用

与预期的电子邮件设计完全切割图像

---

仅使用3x1 px背景base64.gif：

hr{
边界：0；
背景：url（'data:image/gif；base64，r0lgodlhawabaiaaaap///yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaicrfiaow=='）；
高度：10px；
}

如果是电子邮件（见评论部分）：

使用

与预期的电子邮件设计完全切割图像

---

仅使用3x1 px背景base64.gif：

hr{
边界：0；
背景：url（'data:image/gif；base64，r0lgodlhawabaiaaaap///yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaicrfiaow=='）；
高度：10px；
}

---

一个可以让你绝对控制结果的可能性是梯度

div {
    width: 300px;
    height: 40px;
    background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px); 
    background-size: 30px 100%;
}

---

您可以调整图案的大小、黑色条纹的宽度、颜色……

一个可以让您绝对控制结果的可能性是渐变

div {
    width: 300px;
    height: 40px;
    background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px); 
    background-size: 30px 100%;
}

---

---

可以调整图案大小、图案大小、图案宽度、黑色条纹宽度、黑色条带宽度、颜色……

你可以调整图案大小、图案大小、图案大小、图案宽度、黑色条带宽度、颜色…………你可以调整你可以调整图案大小、图案宽度、黑色条带宽度、颜色……

/p>你方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方据据据据据据据方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方124方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方方我喜欢它。我认为很难得到太多的变化，在不同的浏览器中可能呈现不同…但仍然是一个不错的选择。Thansk，所以“运行代码片段”是堆栈溢出中包含的新特性。以前在回答问题时，我曾经创建小提琴，现在你直接在这里创建。我不确定电子邮件客户端是否支持

transform

。不错的方法@LcSalazarI喜欢它。我认为很难得到太多的变化，在不同的浏览器中可能呈现不同…但仍然是一个不错的选择。Thansk，所以“运行代码片段”是堆栈溢出中包含的新特性。以前在回答问题时，我曾经创建小提琴，现在你直接在这里创建。我不确定电子邮件客户端是否支持

transform

。方法不错@lcsalazar，但你使用的是图像。。我在找纯咖啡css@Sundara它是base64字符串：）不使用外部图像。从技术上讲，这是纯css。因为在电子邮件中，有时图像不会直接显示，所以我正在寻找css。这行吗？我会输入我的代码并让你知道tomorrow@Sundara不要。我不知道您在电子邮件中需要它…：\@Sundara我也不确定电子邮件客户端是否支持使用

transform

接受的答案。但您使用的是image。。我在找纯咖啡css@Sundara它是base64字符串：）不使用外部图像。从技术上讲，这是纯css。因为在电子邮件中，有时图像不会直接显示，所以我正在寻找css。这行吗？我会输入我的代码并让你知道tomorrow@Sundara不要。我不知道您在电子邮件中需要它…：\@Sundara我也不确定电子邮件客户端是否支持使用

transform

接受的答案。不是DV，但字体在不同平台上呈现的方式不完全相同，因此您的解决方案非常不受欢迎，你无法控制宽度。正是出于同样的原因，我看到Itay的答案变得越来越低沉。不是DV，但是，字体在不同平台上呈现的方式并不完全相同，因此你的解决方案非常不受欢迎，你无法控制宽度。正是出于同样的原因，我看到Itay的答案变得低沉。