W3.CSS 边框
我有边框
我只有一个左边框。
我有一个绿色的顶部和底部边框。
我有蓝色边框。
悬停时变为绿色的红色边框。
W3.CSS 边框类
W3.CSS 提供了以下边框类:
| 类 | 定义 |
|---|---|
| w3-border | 为元素添加边框（top, right, bottom, left(上、右、下、左）） |
| 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 类之一:
我有正常的边框。
我有小的圆角边框。
我有圆角边框。
我有大的圆角边框。
我有超大圆角边框。
我有 xxlarge 圆角边框。
实例
<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>我有超大圆角边框。</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>我有 xxlarge 圆角边框。</p>
</div>
粗边框
w3-topbar、w3-bottombar、w3-leftbar、和 w3-rightbar 类是 用于向元素添加粗边框:
实例
<div class="w3-panel w3-leftbar">
<p>我的左边框很粗。</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>我有一个粗的蓝色左边框。</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>我有一个粗的蓝色左边框和一个淡蓝色的背景。</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>我有一个粗红色的顶部和底部边框以及淡红色的背景色。</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>
