最新的Web開發教程
 

W3.CSS邊界


邊界類

該W3.CSS邊界類可以在任何HTML元素可以使用。

我對各方面的邊界。


我有一個紅色的底邊框


我有圓角邊框。


我有一個藍色leftbar。

<div class="w3-border">
  <p>I have borders on all sides.</p>
</div>

<div class="w3-border-bottom w3-border-red">
  <p>I have a red bottom border.</p>
</div>

<div class="w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>I have a blue leftbar.</p>
</div>
試一試»

顯示註解

註釋往往顯示一個蒼白的顏色和顏色條:

倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>
試一試»

顯示面板

面板可以顯示在一百萬個不同的方法:

倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。


倫敦是英國的首都城市。 它是英國人口最多的城市,擁有超過13萬居民的大都市區。

<div class="w3-container w3-light-grey w3-border">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div> 
試一試»

顯示行情

W3容器類可以用它來顯示引號。

“讓它成為可能,而不是簡單的那樣簡單。”

艾爾伯特愛因斯坦


“讓它成為可能,而不是簡單的那樣簡單。”

艾爾伯特愛因斯坦


“讓它成為可能,而不是簡單的那樣簡單。”

艾爾伯特愛因斯坦

<div class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div> 
試一試»

如果您使用HTML <BLOCKQUOTE>,請記住,HTML將增加一個額外的左頁邊距:

“讓它成為可能,而不是簡單的那樣簡單。”

艾爾伯特愛因斯坦

<blockquote class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</blockquote> 
試一試»

Hoverable國界

W3-懸停border- 類改變鼠標懸停在邊框的顏色:

紅hoverable邊界


紫色的邊界,輪流懸停藍色


紅柱說變綠懸停。

<div class="w3-container w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div>
試一試»

顯示代碼

HTML示例

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
試一試»

CSS實例

<div class="w3-code cssHigh">

.. CSS code here

</div>
試一試»

JavaScript示例

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
試一試»