HTML에서 점선 테두리를 설정하는 방법에 대한 자세한 소개-HTML 튜토리얼-php.cn

HTML에서 점선 테두리를 설정하는 방법에 대한 자세한 소개

高洛峰

풀어 주다： 2017-03-03 16:34:56

원래의

6421명이 탐색했습니다.

CSS 스타일 및 HTML 태그 요소 사용 다른 HTML 태그에 점선 테두리를 추가하기 위해 몇 가지 공통 태그를 선택하여 점선 테두리 효과를 정렬하고 설정합니다.

1. 일반적인 HTML 태그 p 태그 기간 울리 table tr td

2. 예시에서는 CSS 속성 단어를 사용합니다. 국경 너비 높이

3. 점선 구현을 위한 CSS 주요 소개 border는

을 구현하려는 경우 CSS 스타일과 HTML 태그 요소를 사용합니다.

다양한 HTML 태그에 점선 테두리를 추가하려면 몇 가지 공통 태그를 선택하여 정렬합니다. 점선 테두리 효과를 설정합니다.

1. 일반적인 html 태그

p 태그

span

ul li

table tr td

2. 예시에서는 CSS 속성 단어

border

width

height

3를 사용합니다. , 점선 구현을 위한 CSS 핵심 포인트

border는 테두리 속성입니다. 개체 테두리 효과를 구현하려면 테두리 너비, 테두리 색상, 테두리 스타일(단색 또는 테두리)을 설정해야 합니다. 점선)

border:1px dashed #F00 테두리 스타일 너비를 1px로 설정하고, 점선으로, 점선은 빨간색으로 표시됩니다.

4. 설명 예시

위 라벨에 동일한 너비, 동일한 높이, 테두리 효과를 설정했습니다.

5. 완전한 HTML 코드:

<!DOCTYPE html> <html> 
<head> <meta charset="utf-8" /> 
<title>html边框虚线演示 www.pcss5.com</title> <style> 
.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ 
</style> </head> 
<body> <p class="bor">p盒子</p> 
<span class="bor">span盒子</span> <ul class="bor"> 
<li>ul li列表</li> <li>ul li列表</li> 
</ul> <table class="bor"> 
<tr> <td>表格</td> 
<td>表格2</td> </tr> 
<tr> <td>数据</td> 
<td>数据2</td> </tr> 
</table> </body> 
</html>

로그인 후 복사

위의 예는 동일한 테두리 점선을 포함하여 html의 다양한 태그에 대해 동일한 스타일을 설정합니다.

6. 브라우저 효과 스크린샷

HTML에서 점선 테두리를 설정하는 방법에 대한 자세한 소개