CSS를 사용하여 점선 테두리를 작성하는 방법-HTML 튜토리얼-php.cn

CSS를 사용하여 점선 테두리를 작성하는 방법

php中世界最好的语言

풀어 주다： 2017-11-20 16:19:05

원래의

5180명이 탐색했습니다.

오늘은 CSS를 사용하여 다양한 스타일의 DIV 점선 테두리, 점선 밑줄, 점선 목록을 조작하는 방법을 설명하겠습니다. 그러면 더 이상 실선과 점선 때문에 고생하지 않으실 겁니다! 먼저 네 면 모두에 점선 테두리가 있는 DIV를 살펴보겠습니다.

1. 네 면은 점선 테두리입니다

border:1px dashed #000; 검은색 점선 테두리

예:

CSS代码： .div{border:1px dashed #000; height:50px;width:350px}
Html代码： <div class="divcss5">我的四边为黑色虚线边框</div>

로그인 후 복사

여기에서 1px 점선 검은색 테두리의 4개 테두리로 div 선택기를 정의하는 테두리 약어 방법을 설정하세요. 2. 왼쪽은 점선입니다:

CSS 코드: .div{border-left:1px dashed #000; height:50px;width:350px}

Html 코드:

My 왼쪽은 검은색 점선 테두리< ;/div>

여기 왼쪽에 검은색 점선 테두리가 있습니다

3. 오른쪽 점선:

CSS 코드: .div2{border-right:1px dashed #000 ; height:50px;width:350px}

HTML 코드:

내 오른쪽은 검은색 점선 테두리입니다

여기서는 오른쪽을 검은색 점선 테두리로 설정했습니다.

4. 상단 가장자리(상단 가장자리)는 점선입니다:

CSS 코드: .div3{border-top:1px dashed #000; height:50px;width:350px}

Html 코드:

내 윗부분은 검은색 점선 테두리입니다

여기서 위쪽 가장자리(상단 가장자리)는 검은색 점선 테두리로 설정되어 있습니다

5. 아래쪽 가장자리(아래쪽 가장자리)는 점선으로 설정되어 있습니다. :

CSS 코드: .div4{border-

bottom

:1px dashed #000; height:50px ;width:350px}Html code:

검은색 점선 테두리가 있습니다 하단

여기서 하단 한쪽(하단)에 검은색 점선 테두리를 설정했습니다

6. 한 쪽 변이 점선이 아니면

나머지

세 변은 점선 추가 점선은 아니지만 가장자리가 없는 오른쪽 테두리, 나머지 세 변은 검은색 점선 테두리입니다.

CSS 코드: .div5{border:1px dashed #000; border-right:0; 350px}

Html code:

오른쪽 테두리에는 테두리가 없고 나머지 세 변은 검은색 점선 테두리 예

여기서 먼저

개체

를 설정합니다. 4면 모두에 검은색 1px 점선 테두리를 적용한 다음 한쪽을 0으로 설정합니다. 이는 3면 테두리 점선 속성 을 설정하는 것과 동일하지만 여기서는 테두리 속성을 설정하기 전과 후의 순서에 주의하세요. 위 예제의 전체 DIV+CSS 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 实例说明<title>www.php.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
</style>
</head>
<body>
www.php.cn虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

로그인 후 복사

DIV 점선 테두리 튜토리얼은 여기서 끝납니다. 배웠나요?