W3.CSS Borders (边框)

2020-11-30 10:25 更新
我有边框

 

我只有一个左边框

 

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

 

我有蓝色边框。

 

我的左边框很粗。

 

我的顶部和底部边框很深。

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 类之一:

我有正常的边框

 

我有小的圆角边框

 

我的边框是圆角边框

 

我有大的圆角边框

 

我有xlarge圆角边框

 

我有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>我有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>


尝试一下 »
点击“尝试一下”按钮查看在线实例



以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号