CSS로 점선을 그리는 방법?

CSS로 점선을 어떻게 그릴 수 있습니까?

예를 들면 :

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

CSS로 스타일링 <hr>을 참조하십시오 .

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

HTML 사용 :

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

및 styles.css에서 :

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

받아 들여지는 대답에는 더 이상 최신 브라우저에 필요하지 않은 많은 내용이 있습니다. IE8까지 모든 브라우저에서 개인적으로 다음 CSS를 테스트했으며 완벽하게 작동합니다.

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

border: none브라우저가 hr태그에 적용하는 모든 기본 테두리 스타일을 제거하려면 먼저 와야 합니다.

'border : 1px dot black'과 같은 의미입니까?

w3schools.com 참조

이 줄은 당신을 위해 작동합니다.

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

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

여기에서 모든 솔루션을 시도했지만 깨끗한 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" />

이렇게하려면, 당신은 간단한 필요는 추가 border-top또는 border-bottom사용자에 <hr/>다음과 같은 태그를 :

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

원하는 선 유형 또는 색상으로

점선으로하려는 요소에 다음 속성을 추가하십시오.

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

사용 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;"/>

요소 뒤의 점선 :

http://jsfiddle.net/korigan/ubtkc17e/

HTML

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