如何用css画虚线？

Question

如何用 CSS 绘制虚线？

Answer 1

例如：

hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

before
<hr>
after

另见样式

<hr>

与CSS.

Answer 2

接受的答案有很多现代浏览器不再需要的东西。我已经在早于 IE8 的所有浏览器上亲自测试了以下 CSS，并且它运行良好。

hr {
  border: none;
  border-top: 1px dotted black;
}

border: none

必须首先出现，以删除浏览器应用于

hr

标签的所有默认边框样式。

Answer 3

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

Answer 4

使用 HTML：

<div class="horizontal_dotted_line"></div>

在你的 CSS 中：

.horizontal_dotted_line {
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
}

Answer 5

这条线应该适合你：

<hr style="border: none; border-top: 2px dotted black" />

Answer 6

你的意思是像“边框：1px 点黑”之类的东西吗？

w3schools.com 参考

Answer 7

为此，您只需在

border-top

标签中添加一个

border-bottom

或

<hr/>

，如下所示：

<hr style="border-top: 2px dotted navy" />

你想要的任何线型或颜色

Answer 8

.dotted-line {
  border-bottom: thin red dotted;
}

Answer 9

您可以使用

::after

伪元素添加虚线。

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.dotted-line::after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}

<h2 class="dotted-line">Lorem ipsum</h2>

Answer 10

将以下属性添加到您想要虚线的元素。

style="border-bottom: 1px dotted #ff0000;"

Answer 11

我在这里尝试了所有的解决方案，但没有一个给出干净的 1px 线。为此，请执行以下操作：

border: none;
border-top: 1px dotted #000;

或者：

border-top: 1px dotted #000;
border-right: none;
border-bottom: none;
border-left: none;

Answer 12

这样使用：

<hr style="border-bottom:dotted" />

Answer 13

我喜欢“背景图像：径向渐变......”

h2 {position: relative}

h2:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 50%;
  transform:  translateX(-50%);
  bottom: -60px;
  background-image: radial-gradient( ellipse, #000 2px, #000 3px, transparent 3px) ;
    background-size: 20px 20px;
    background-position: 0px 0;
  background-repeat: repeat-x;
}

<h2>REAL CSS DOTTED LINE</h2>

Answer 14

您可以使用

hr

隐藏默认的

color: transparent

边框。然后在顶部边框添加一条虚线。

<hr style="border-top: 2px dashed black; color: transparent;" />

Answer 15

使用

hr

为我创建了两条线，一条是实线，一条是虚线。

我发现使用

div

效果很好：

div {
  border-top: 1px dotted #cccccc;
  color: #ffffff;
  background-color: #ffffff;
  height: 1px;
  width: 95%;
}

另外，因为您可以将宽度设置为百分比，所以它的两边总是会有一些空间（即使您调整窗口大小时）。

Answer 16

有一个非常简单的方法，基本上你的

<hr>

接受四边形每一边的边框样式。所以你可以指定它为，因为 none 的值是四边形的边和四边形的底部。

hr { border-style: dotted none none;}

Answer 17

每个浏览器（Chrome、Firefox 等）对

<hr>

元素应用略有不同的样式。无法保证这些样式是什么。

因此，最稳健的方法是使用

all: initial

清除浏览器的样式，然后然后应用虚线边框。

hr {
  all: initial;
  display: block;
  border-bottom: 2px dotted black;
}

<hr />

Answer 18

hr {
  border-style: noen;
  border-top-style:dotted;
  border-coler: gray;
  border width: 5px;
  width:5%
}