집 > 기사 > 웹 프론트엔드 > CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)

CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)

不言원래의: 2018-07-16 10:23:4811542검색

CSS에서 점선 테두리를 만드는 방법은 무엇입니까? HTML 점선 테두리를 설정할 때 일반적으로 테두리에 실선을 생각합니다. HTML 웹 페이지 레이아웃에서는 실선이 가장 많이 사용됩니다. CSS 점선 효과를 원할 경우 그림을 테두리로 사용할 수도 있습니다. 배경이지만 권장되지 않습니다. 점선 효과를 얻으려면 CSS 점선 스타일을 사용하세요. 그러면 CSS 점선 스타일은 둘 다 CSS 점선이지만 다릅니다. CSS 점선 테두리 코드의 다음 예제 사용 데모를 참조하세요.

css 점선 스타일 구현 방법 1: 점선

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虚线！</div>
</body>
</html>

점선 표시 효과:

CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)

css 점선 스타일 2: 점선

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虚线！</div>
</body>
</html>

점선 표시 효과:

CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)

CSS 점선 스타일 테두리에서 점선과 점선의 차이:

dashed: 대시(dash)에서 유래, 대시로 구성된 점선

dotted: 점(점)에서 유래 ), 점으로 구성된 점선, 점선이라고도 함

위 데모에서도 차이점을 직관적으로 확인할 수 있습니다

CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)

관련 기사