Menggunakan gaya CSS dan elemen teg HTML
Untuk menambah sempadan bertitik pada teg HTML yang berbeza, kami memilih beberapa teg biasa untuk diselaraskan dan menetapkan kesan sempadan bertitik.
1. Tag html biasa
teg p
jarak
ul li
jadual tr td
2. Contoh menggunakan perkataan atribut CSS
sempadan
lebar
tinggi
3. Pengenalan utama kepada CSS untuk merealisasikan garis putus-putus
sempadan ialah atribut sempadan Jika anda ingin mencapai kesan sempadan objek, anda perlu menetapkan lebar jidar, warna jidar dan gaya jidar (garisan padat atau bertitik)
sempadan:1px putus-putus #F00 Ini adalah untuk menetapkan lebar gaya sempadan kepada 1px, garis putus-putus dan garis putus-putus berwarna merah.
4. Perihalan contoh
Kami menetapkan lebar, ketinggian dan kesan sempadan yang sama untuk label di atas.
5. Kod HTML lengkap:
<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>Contoh di atas menetapkan gaya yang sama untuk teg berbeza dalam html, termasuk garis putus-putus jidar yang sama.
6. Tangkapan skrin penyemak imbas
Tangkapan skrin kesan sempadan bertitik untuk menetapkan teg html yang berbeza
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
