How to draw a dotted line with css?

小开

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

小开

你的意思是像“边框: 1px 点黑色”吗？

w3schools.com reference

小开

使用 HTML:

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

and in styles.css:

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

小开

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

小开

最佳答案

例如:

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

before
<hr>
after

参见用 CSS 设计 <hr>。

小开

将以下属性添加到要使用虚线的元素中。

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

小开

我在这里尝试了所有的解决方案，没有给出一个干净的1px 行。要做到这一点，需要做到以下几点:

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

或者:

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

小开

使用方法如下:

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

小开

这句话适合你:

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

小开

为此，您只需在 <hr/>标记中添加一个 border-top或 border-bottom，如下所示:

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

与任何线条类型或颜色你想要的

小开

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

我发现这种方法非常有效:

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

另外，因为您可以将宽度设置为百分比，所以两边总是有一些空间(即使在调整窗口大小时也是如此)。

小开

试试冲破..。

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

小开

这个被接受的答案有很多现代浏览器不再需要的东西。我个人已经在所有的浏览器上测试了下面的 CSS，最早可以追溯到 IE8，它工作得非常完美。

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

border: none必须首先出现，以删除浏览器应用于 hr标记的所有默认边框样式。

小开

一个接一个的虚线元素:

Http://jsfiddle.net/korigan/ubtkc17e/

超文本标示语言

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

CSS

.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;
}

小开

I love "background-image: radial-gradient ... "

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>