일반적인 CSS 점선 예제 튜토리얼

零下一度

풀어 주다： 2017-06-16 13:53:42

원래의

2727명이 탐색했습니다.

DIV CSS 점선 튜토리얼에는 일반적인 DIV 점선 사례를 다양한 스타일로 설명하는 CSS 튜토리얼이 포함되어 있습니다.

이 섹션에서는 일반적인 CSS 점선 및 DIV 튜토리얼을 소개합니다. CSS 점선, 밑줄, 목록 점선이 모두 처리됩니다.

1. CSS 테두리 점선

여기서 점선은 border 속성의 점선 테두리에 의해 제어됩니다. 아래에 설정한 CSS 높이(CSS 높이)와 CSS 너비(CSS 너비)는 데모 보기의 편의를 위해 350픽셀입니다.
1. 네 면에 점선 테두리
border:1px 점선 #000; 검은색 점선 테두리
예:
CSS 코드: .divcss5{border:1px 점선 #000; < ;div class="divcss5">내 네 면은 검은색 점선 테두리입니다

divcss5 선택기의 네 면 테두리를 1px 검은색 점선 테두리

2로 정의하려면 여기에 테두리 약어를 설정하세요. 왼쪽:
CSS 코드: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}Html 코드:

내 왼쪽은 검은색 점선 테두리< /div>
여기 왼쪽에 검은색 점선 테두리가 있습니다

3. 오른쪽에 점선이 있습니다:
CSS 코드: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px} Html code:

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

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

4. 상단 가장자리(상단 가장자리)는 점선입니다:
CSS 코드: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}Html 코드:

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

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

5. 점선:
CSS 코드: .divcss5-4{border-bottom:1px dashed # 000; height:50px;width:350px}Html code:

내 아래쪽 가장자리 는 검은색 점선 테두리

여기서 아래쪽 테두리(아래쪽 테두리)를 검은색 점선 테두리

6. 한쪽 면이 점선이 아니고 나머지 세 면이 점선이면
오른쪽 테두리를 추가하세요. 점선은 아니지만 가장자리가 없고 나머지 세 변은 검은색 점선 테두리입니다. CSS 코드: .divcss5-5{border: 1px dashed #000;border-right:0; height:50px;width:350px}
Html code :

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

여기서는 먼저 개체의 네 변을 검은색 1px로 설정합니다. 점선 테두리를 설정한 다음 한쪽 가장자리를 0으로 설정합니다. 이는 3면의 점선 테두리 속성을 설정하는 것과 동일하지만 순서 전후의 테두리 속성 설정에 주의하세요.

위 예제의 전체 DIV+CSS 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<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}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<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>

로그인 후 복사

2. 하이퍼링크 점선 밑줄

링크된 텍스트 콘텐츠에 점선 밑줄이 있는 링크가 있거나 마우스를 위로 이동하는 경우가 많습니다. 연결된 텍스트 점선 밑줄이 나타납니다. 어떻게 해야 할까요? 여기서는 CSS 하이퍼링크의 점선 밑줄을 소개하겠습니다.

1. 연결된 텍스트에는 점선 밑줄이 있습니다.

여기서 CSS 테두리 속성을 사용하여 하이퍼링크 개체의 CSS 스타일도 제어합니다.

데모 CSS 코드:

a{ border-bottom:1px dashed #111;}/* 여기에서 연결된 텍스트 아래에 점선 밑줄이 나타나도록 설정하세요.*/
a:hover{ border:0;}/* 여기에서 설정하세요 마우스가 지나간 후의 링크 점선은 text*/

DIV CSS 코드 완성:

<!DOCTYPE html><html><head><meta charset="gb2312" /><title>CSS 虚线下划线 DIVCSS5实例说明</title><style>a{ border-bottom:1px dashed #111;text-decoration:none;}a:hover{ border:0;}</style></head>
<body>欢迎到<a href="www.php.cn">CSS教程网</a>的www.php.cn- divcss5学习CSS</body></html>

로그인 후 복사

Instructions: text-꾸밈:none 이것은 CSS 밑줄(하이퍼링크의 기본 밑줄 속성)을 제거하기 위한 것입니다.

위 내용은 일반적인 CSS 점선 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!