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

html中文字下面怎麼有虛線

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

在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中文網其他相關文章！

html5 css3 html border

陳述：

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

上一篇：click在html中用法是什麼下一篇：click在html中用法是什麼

看更多