CSS를 사용하여 점선 테두리를 작성하는 방법
- php中世界最好的语言원래의
- 2017-11-20 16:19:055182검색
오늘은 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 코드: 453a937ee1f418ba8e23fdffc6358aceMy 왼쪽은 검은색 점선 테두리< ;/div>
여기 왼쪽에 검은색 점선 테두리가 있습니다
3. 오른쪽 점선:
CSS 코드: .div2{border-right:1px dashed #000 ; height:50px;width:350px}
HTML 코드: fc61642327f9095004cabfb91f332498내 오른쪽은 검은색 점선 테두리입니다16b28748ea4df4d9c2150843fecfba68
여기서는 오른쪽을 검은색 점선 테두리로 설정했습니다.
4. 상단 가장자리(상단 가장자리)는 점선입니다:
CSS 코드: .div3{border-top:1px dashed #000; height:50px;width:350px}
Html 코드: 9037bcb04002f9d759863b6dcecc19ee내 윗부분은 검은색 점선 테두리입니다16b28748ea4df4d9c2150843fecfba68
여기서 위쪽 가장자리(상단 가장자리)는 검은색 점선 테두리로 설정되어 있습니다
5. 아래쪽 가장자리(아래쪽 가장자리)는 점선으로 설정되어 있습니다. :
CSS 코드: .div4{border-
bottom:1px dashed #000; height:50px ;width:350px}Html code: 36edadc51a140d0b90036cae6a50a969검은색 점선 테두리가 있습니다 하단16b28748ea4df4d9c2150843fecfba68
여기서 하단 한쪽(하단)에 검은색 점선 테두리를 설정했습니다
6. 한 쪽 변이 점선이 아니면
나머지세 변은 점선 추가 점선은 아니지만 가장자리가 없는 오른쪽 테두리, 나머지 세 변은 검은색 점선 테두리입니다.
CSS 코드: .div5{border:1px dashed #000; border-right:0; 350px}
Html code: 40a16365da51158de689c5c0315863f4오른쪽 테두리에는 테두리가 없고 나머지 세 변은 검은색 점선 테두리 예16b28748ea4df4d9c2150843fecfba68
여기서 먼저
개체를 설정합니다. 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 점선 테두리 튜토리얼은 여기서 끝납니다. 배웠나요?
관련 읽기:
Html에서 하이퍼링크 텍스트 색상을 설정하는 방법HTML에서 하이퍼링크 글꼴 색상과 클릭 후 글꼴 색상을 설정하이퍼링크를 구현하기 위한 여러 HTML 코드 요약위 내용은 CSS를 사용하여 점선 테두리를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!