邊界類
該W3.CSS邊界類可以在任何HTML元素可以使用。
我對各方面的邊界。
我有一個紅色的底邊框
我有圓角邊框。
例
<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>
試一試» 顯示註解
註釋往往顯示一個蒼白的顏色和顏色條:
例
<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萬居民的大都市區。
例
<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邊界
紫色的邊界,輪流懸停藍色