W3.CSS 边框

我有边界。

我只有左边框。

我有一个绿色的顶部和底部边框。

我有蓝色边框。

我的左边框很粗。

悬停时红色边框变为绿色。

W3.CSS 边框类

W3.CSS提供以下边框类：

类	定义
w3边框	向元素添加边框（上、右、下、左）
w3-边框顶部	向元素添加顶部边框
w3-右边框	为元素添加右边框
w3-边框-底部	为元素添加底部边框
w3-左边框	向元素添加左边框
w3-边框-0	删除所有边框
w3-边框-颜色	以指定颜色显示边框（如红色、蓝色等）
w3-悬停-边框-颜色	添加可悬停边框颜色
w3-底栏	为元素添加粗底部边框
w3-左栏	向元素添加粗左边框
w3-右栏	为元素添加粗右边框
w3-顶栏	向元素添加粗顶部边框

添加边框

这个w3边框类用于向任何 HTML 元素添加边框：

我有边界。

我只有左边框。

我有顶部和底部边框。

示例

<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>

<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>

亲自试一试»

边框颜色

这个w3边框-颜色类用于向边框添加颜色：

我有红色边框。

我有一个蓝色的左边框。

我有一个绿色的顶部和底部边框。

我有一个红色的左边框和浅红色的背景颜色。

示例

<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>

<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div>

亲自试一试»

圆角边框

要添加圆角边框，请添加其中之一w3-轮-尺寸课程：

我有正常的边界。

我有小圆形边框。

我有圆形边框。

我有大的圆形边框。

我有超大的圆形边框。

我有 xxlarge 圆形边框。

示例

<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>

<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>

<div class="w3-panel w3-border w3-round">
<p>My borders are rounded.</p>
</div>

<div class="w3-panel w3-border w3-round-large">
<p>I have large rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>

<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have xxlarge rounded borders.</p>
</div>

亲自试一试»

粗边框

这个w3-顶栏,w3-底栏,w3-左栏,和 w3-rightbar类用于向元素添加粗边框：

我的左边框很粗。

我有一个粗的蓝色左边框。

我有一个厚蓝色的左边框和淡蓝色的背景颜色。

示例

<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>

<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>

亲自试一试»

悬停边框

这个w3-悬停-边框-颜色类在鼠标悬停时更改边框的颜色：

悬停时边框变为红色。

悬停时红色边框变为绿色。

示例

<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>

<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>

亲自试一试»

粗（不可见）左边框在悬停时变为绿色。

厚的（不可见的）底部边框在悬停时变成绿色。

示例

<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>

<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>

亲自试一试»

厚厚的白色（不可见）边框在悬停时会变成绿色。

厚厚的白色（不可见）边框在悬停时会变成黑色。

示例

<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>

<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>

亲自试一试»