首頁 >web前端 >html教學 >html中文字下面怎麼有虛線

html中文字下面怎麼有虛線

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-06-04 14:31:3012994瀏覽

在html中,可以使用border-bottom設定文字下面有虛線,只需要給文字元素設定「border-bottom:width dashed color」樣式即可。設定元素下邊框的樣式時,只有當這個值不是none時邊框才可能出現。

html中文字下面怎麼有虛線

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

border-bottom 簡寫屬性把下邊框的所有屬性設定到一個宣告中。

可以依序設定下列屬性:

  • border-bottom-width

  • border-bottom-style

  • #border-bottom-color

語法:

 border-bottom:width style color;

如果不設定其中的某個值,也不會出問題,例如border-bottom:solid #ff0000; 也是允許的

設定元素下邊框的樣式時,只有當這個值不是none 時邊框才可能出現。

html中文字下面怎麼有虛線

範例:

<html>
  <head>
    <style type="text/css">
      p {
        border-style: solid;
      }
      p.none {
        border-bottom-style: none;
      }
      p.dotted {
        border-bottom-style: dotted;
      }
      p.dashed {
        border-bottom-style: dashed;
      }
      p.solid {
        border-bottom-style: solid;
      }
      p.double {
        border-bottom-style: double;
      }
      p.groove {
        border-bottom-style: groove;
      }
      p.ridge {
        border-bottom-style: ridge;
      }
      p.inset {
        border-bottom-style: inset;
      }
      p.outset {
        border-bottom-style: outset;
      }
    </style>
  </head>

  <body>
    <p class="none">No bottom border.</p>
    <p class="dotted">A dotted bottom border.</p>
    <p class="dashed">A dashed bottom border.</p>
    <p class="solid">A solid bottom border.</p>
    <p class="double">A double bottom border.</p>
    <p class="groove">A groove bottom border.</p>
    <p class="ridge">A ridge bottom border.</p>
    <p class="inset">An inset bottom border.</p>
    <p class="outset">An outset bottom border.</p>
  </body>
</html>

效果:

html中文字下面怎麼有虛線

擴充資料:

border-bottom-color 設定元素的下邊框的顏色。

只能定義純色,而且只有當邊框的樣式是一個非 none 或 hidden 的值時邊框才可能出現。

註解:請一律把 border-style 屬性宣告到 border-color 屬性之前。元素必須在您改變其顏色之前獲得邊框。

屬性值:

推薦學習:html影片教學

#

以上是html中文字下面怎麼有虛線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn