1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

通过 border 样式属性我们能为一个元素设置它的边框, borderborder-widthborder-styleborder-color 的缩写。

在下例中设置了一个宽度为 6px、 样式为圆点、颜色为 teal 的边框。

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/RwjBGNO?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

$$tip

outlineborder 的区别在于, outline 不占据空间,而 border 占据空间。

$$

边框宽度

border-width 可以用以设置边框的宽度,有以下取值:

  • 长度
  • thin:细边框
  • medium:中等边框
  • thick:粗边框

$$tip

thinmediumthick 在不同浏览器上粗细效果不同,因此不推荐使用。

$$

当设置的值数量不同时效果也会不同:

/* 设置所有边的宽度为 2px */
border-width: 2px;
/* 设置上下边框为 2px,左右边框为 3px */
border-width: 2px 3px;
/* 设置上边框为 2px, 左右边框为 3px, 下边框为 4px (不推荐)*/
border-width: 2px 3px 4px;
/* 设置上边框为 2px, 右边框为 3px, 下边框为 4px, 左边框为 5px */
border-width: 2px 3px 4px 5px;

或者可以设置单个边框宽度:

/* 上边框宽度 */
border-top-width: 1px;
/* 下边框宽度 */
border-bottom-width: 1px;
/* 左边框宽度 */
border-left-width: 1px;
/* 右边框宽度 */
border-right-width: 1px;

边框样式

border-style 可以用以设置边框的样式,有以下取值:

取值 效果 描述
none <div style="width: 40px; height: 40px; border: none 6px teal; background-color: pink;"></div> 默认值,没有边框。
solid <div style="width: 40px; height: 40px; border: solid 6px teal; background-color: pink;"></div> 实线。
dotted <div style="width: 40px; height: 40px; border: dotted 6px teal; background-color: pink;"></div> 圆点。
dashed <div style="width: 40px; height: 40px; border: dashed 6px teal; background-color: pink;"></div> 虚线。
double <div style="width: 40px; height: 40px; border: double 6px teal; background-color: pink;"></div> 双实线。
groove <div style="width: 40px; height: 40px; border: groove 6px teal; background-color: pink;"></div> 雕刻效果。
ridge <div style="width: 40px; height: 40px; border: ridge 6px teal; background-color: pink;"></div> 浮雕效果。
inset <div style="width: 40px; height: 40px; border: inset 6px teal; background-color: pink;"></div> 陷入效果。
outset <div style="width: 40px; height: 40px; border: outset 6px teal; background-color: pink;"></div> 突出效果。

与边框宽度类似,当设置的值数量不同时效果也会有所不同:

/* 设置所有边的颜色为 dotted */
border-style: dotted;
/* 设置上下边框为 dotted,左右边框为 dashed */
border-style: dotted dashed;
/* 设置上边框为 dotted,左右边框为 dashed,下边框为 double (不推荐) */
border-style: dotted dashed double;
/* 设置上边框为 dotted, 右边框为 dashed, 下边框为 double, 左边框为 ridge */
border-style: dotted dashed double ridge;

与边框宽度类似,可以设置单个边框样式:

/* 上边框样式 */
border-top-style: dotted;
/* 下边框样式 */
border-bottom-style: dotted;
/* 左边框样式 */
border-left-style: dotted;
/* 右边框样式 */
border-right-style: dotted;

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/MWOBbaP?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

边框颜色

border-color 可以用来定义边框的颜色。

与边框宽度类似,当设置的值数量不同时效果也会有所不同:

/* 设置所有边的颜色为 red */
border-color: red;
/* 设置上下边框为 red,左右边框为 yellow */
border-color: red yellow;
/* 设置上边框为 red,左右边框为 yellow,下边框为 blue (不推荐) */
border-color: red yellow blue;
/* 设置上边框为 red, 右边框为 yellow, 下边框为 blue, 左边框为 green */
border-color: red yellow blue green;

与边框宽度类似,可以设置单个边框颜色:

/* 上边框颜色 */
border-top-color: red;
/* 下边框颜色 */
border-bottom-color: red;
/* 左边框颜色 */
border-left-color: red;
/* 右边框颜色 */
border-right-color: red;

练习

  1. 实现以下的效果。

$$demo

<div class="box"></div>

<style>

.box { width: 100px; height: 100px; border-width: 6px; border-color: teal pink; border-style: dotted dashed; }

</style>

$$