CSS スタイルと HTML タグ要素の使用
さまざまな HTML タグに点線の境界線を追加するには、いくつかの共通のタグを選択して、点線の境界線効果を配置および設定します。
1. 一般的な HTML タグ
pタグ
スパン
ウルリ
テーブル tr td
2. この例では CSS 属性の単語を使用します
ボーダー
幅
身長
3. 点線を実現するための CSS の概要
border は境界線の属性です。オブジェクトの境界線効果を実現したい場合は、境界線の幅、境界線の色、境界線のスタイル (実線または点線) を設定する必要があります。
border:1px 破線 #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 点線境界線効果のスクリーンショット
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
