最新的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>
试一试»