HTML에서 점선 테두리를 설정하는 방법에 대한 자세한 소개
- 高洛峰원래의
- 2017-03-03 16:34:566323검색
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 스크린샷
추가 html 점선 테두리 설정 방법에 대한 자세한 소개는 PHP 중국어 홈페이지 관련 기사를 참고해주세요!