CSS 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-07-16 10:23:48

원래의

11499명이 탐색했습니다.

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 점선 스타일을 구현하는 두 가지 방법: 점선 및 점선(예)