CSS 스타일 및 HTML 태그 요소 사용
다른 HTML 태그에 점선 테두리를 추가하기 위해 몇 가지 공통 태그를 선택하여 점선 테두리 효과를 정렬하고 설정합니다.
1. 일반적인 HTML 태그
p태그
스팬
울리
테이블 tr td
2. CSS 속성 단어를 사용한 예시
경계
너비
키
3. 점선 구현을 위한 CSS 주요 소개
border는 테두리 속성으로, 개체 테두리 효과를 구현하려면 테두리 너비, 테두리 색상, 테두리 스타일(실선 또는 점선)을 설정해야 합니다.
border:1px dashed #F00 테두리 스타일 너비를 1px로 설정하고 점선으로 표시하며 점선은 빨간색으로 표시됩니다.
4. 예시 설명
위 라벨에 동일한 너비, 동일한 높이, 테두리 효과를 설정했습니다.
5. 완전한 HTML 코드:
<ol class="dp-xml">
<li class="alt"><!DOCTYPE html> <html> </li>
<li class="alt"><head> <meta charset="utf-8" /> </li>
<li class="alt"><title>html边框虚线演示 www.pcss5.com</title> <style> </li>
<li class="alt">.bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css注释说明：让span形成块*/ </li>
<li class="alt"></style> </head> </li>
<li class="alt"><body> <p class="bor">p盒子</p> </li>
<li class="alt"><span class="bor">span盒子</span> <ul class="bor"> </li>
<li class="alt"><li>ul li列表</li> <li>ul li列表</li> </li>
<li class="alt"></ul> <table class="bor"> </li>
<li class="alt"><tr> <td>表格</td> </li>
<li class="alt"><td>表格2</td> </tr> </li>
<li class="alt"><tr> <td>数据</td> </li>
<li class="alt"><td>数据2</td> </tr> </li>
<li class="alt"></table> </body> </li>
<li class="alt"></html> </li>
</ol>위의 예는 동일한 테두리 점선을 포함하여 html의 다양한 태그에 대해 동일한 스타일을 설정합니다.
6. 브라우저 스크린샷
다양한 태그에 대한 HTML 점선 테두리 효과 스크린샷
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
