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-颜色 | 以指定颜色（如红色、蓝色等）显示边框 |
| w3-hover-border-颜色 | 添加可悬停的边框颜色 |
| 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>
