일반적인 CSS 점선 예제 튜토리얼
- 零下一度원래의
- 2017-06-16 13:53:422728검색
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">내 네 면은 검은색 점선 테두리입니다16b28748ea4df4d9c2150843fecfba68
divcss5 선택기의 네 면 테두리를 1px 검은색 점선 테두리
2로 정의하려면 여기에 테두리 약어를 설정하세요. 왼쪽:
CSS 코드: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}Html 코드: 8dc7f26bbeb0b2d87fad8d7057caf02b내 왼쪽은 검은색 점선 테두리950c0e09a208ea6a6c67c615a801fbc6
여기 왼쪽에 검은색 점선 테두리가 있습니다
3. 오른쪽에 점선이 있습니다:
CSS 코드: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px} Html code: d130731981e56f6edfc3accc115d1597오른쪽은 검은색 점선 테두리입니다16b28748ea4df4d9c2150843fecfba68
여기서는 오른쪽을 검은색 점선 테두리로 설정했습니다
4. 상단 가장자리(상단 가장자리)는 점선입니다:
CSS 코드: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}Html 코드: c01375deed980076d35367a1218bebb7내 윗부분은 검은 점선 테두리입니다16b28748ea4df4d9c2150843fecfba68
여기서 위쪽 가장자리(상단 가장자리)는 검은색 점선 테두리로 설정되어 있습니다
5. 점선:
CSS 코드: .divcss5-4{border-bottom:1px dashed # 000; height:50px;width:350px}Html code: 8de9b8c1fb9699c8b3b7c3e5586585c1내 아래쪽 가장자리 는 검은색 점선 테두리16b28748ea4df4d9c2150843fecfba68
여기서 아래쪽 테두리(아래쪽 테두리)를 검은색 점선 테두리
6. 한쪽 면이 점선이 아니고 나머지 세 면이 점선이면
오른쪽 테두리를 추가하세요. 점선은 아니지만 가장자리가 없고 나머지 세 변은 검은색 점선 테두리입니다. CSS 코드: .divcss5-5{border: 1px dashed #000;border-right:0; height:50px;width:350px}
Html code : c4a633836d3210c4eccf46c53c0aaf8d오른쪽 테두리에는 테두리가 없고 나머지 세 변은 검은색 점선 테두리입니다.16b28748ea4df4d9c2150843fecfba68
여기서는 먼저 개체의 네 변을 검은색 1px로 설정합니다. 점선 테두리를 설정한 다음 한쪽 가장자리를 0으로 설정합니다. 이는 3면의 점선 테두리 속성을 설정하는 것과 동일하지만 순서 전후의 테두리 속성 설정에 주의하세요.
<!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 스타일도 제어합니다.
a{ border-bottom:1px dashed #111;}/* 여기에서 연결된 텍스트 아래에 점선 밑줄이 나타나도록 설정하세요.*/
a:hover{ border:0;}/* 여기에서 설정하세요 마우스가 지나간 후의 링크 점선은 text*/
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!