W3.CSS 边框
我带有边框。
我只带左边框。
我带有绿色上边框和下边框。
我带有蓝色边框。
红色边框，鼠标悬停时变为绿色。
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>我带有超大圆角边框。</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>我带有超超大圆角边框。</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>
