边界类
该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边界
紫色的边界,轮流悬停蓝色