W3.CSS Borders (边框)
W3.CSS 边框类
W3.CSS 提供以下边框类：
| 类 | 定义 |
|---|---|
| w3-border |
将边框（上，右，下，左）添加到元素 |
| w3-border-top |
为元素添加顶部边框 |
| w3-border-right | 为元素添加右边框 |
| w3-border-bottom |
在元素上添加底边框 |
| w3-border-left | 向元素添加左边框 |
| w3-border-0 | 删除所有边框 |
| w3-border-color | 以指定的颜色（例如红色，蓝色等）显示边框 |
| w3-hover-border-color |
添加可悬停的边框颜色 |
| w3-bottombar | 在元素上添加粗底边框 |
| w3-leftbar |
在元素上添加粗边框 |
w3-rightbar |
为元素添加粗右边框 |
| w3-topbar | 在元素上添加粗边框 |
添加边框
w3-border 类用于边框添加到任何 HTML 元素：
实例
<div class="w3-panel w3-border">
<p>我有边界</p>
</div>
<div class="w3-panel w3-border-left">
<p>我只有一个左边框</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>我有上下边界</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
边框颜色
w3-border-color 类用于颜色添加边框：
实例
<div class="w3-panel w3-border w3-border-red">
<p>我有红色边框。</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>我有一个蓝色的左边框。</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>我有一个绿色的顶部和底部边框。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
圆角边框
要添加圆角边框，请添加 w3-round-size 类之一：
实例
<div class="w3-panel w3-border">
<p>我有正常的边框。</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>我有小的圆角边框。</p>
</div>
<div class="w3-panel w3-border w3-round">
<p>我边框是圆角边框。</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>我有大的圆角边框。</p>
</div>
<div class="w3-panel w3-border w3-round-xlarge">
<p>我有xlarge圆角边框。</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>我有xxlarge圆角边框。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
悬停边框
w3-hover-border-color 类更改鼠标悬停在边框的颜色：
实例
<div class="w3-panel w3-border w3-hover-border-red">
<p>悬停时变为红色的边框。</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>悬停时变为绿色的红色边框。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>白色（不可见）的左粗边框在悬停时变为绿色。</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>白色（不可见）底边框粗，在悬停时变为绿色。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>白色（不可见）粗边框在悬停时变为绿色。</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>白色（不可见）的粗边框会在悬停时变黑。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例