背景

我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。

学问必须合乎自己的兴趣,方可得益。 ——莎士比亚

上篇习题解析

上一篇结尾留了一个小习题，我们先来看一下，容器上的折角形状是如何实现的。

习题中的折角效果，是通过设置边框样式实现的。一般容器四个边框，如果都设置，会展示为矩形，如果只设置相邻的两条边就会形成折角的效果。

• 容器上两个相对的角上，分别添加一个矩形，只设置相邻的两条边就会形成折角的效果。

• 左上角的折角，使用 border-top 设置上边框，使用 border-left 设置左边线，变呈现出一个向右下开口的折角。

• 右下角的折角，使用 border-bottom 设置下边框，使用 border-right 设置有边线，变呈现出一个向左上开口的折角。

https://code.juejin.cn/pen/7127280965944082446

知识点讲解

今日主要讲讲如何为设置边框样式。

边框类型

边框的样式支持很多种类，可以是实线也可以是虚线，可以只设置局部边框，可以为边框添加圆角样式。

折角边框

image

单侧边框

image

虚线边框

image

圆角内凹边框

image

别具一格的按钮

image

实现方案

• 折角边框：容器上两个相对的角上，分别添加一个矩形，只设置相邻的两条边就会形成折角的效果，比如左上角的折角，使用 border-top 设置上边框，使用 border-left 设置左边线，变呈现出一个向右下开口的折角。

• 单侧边框：使用 border-方位可以设置只有对应方位的单侧边框。

• 虚线边框：将 border-style 的值设置为 dotted 便可以实现虚线边框。

• 圆角内凹边框：边框的颜色可以设置成透明，所以两侧的圆角内凹是通过将圆形图案的相邻边框设置为透明实现的效果，比如左侧的圆形图案，设置 border-left-color 的值为 transparent 和 border-bottom-color 的值为 transparent，形成一个只有右侧有边框的半圆形。

• 别具一格的按钮：通过设置 border 的不同类型值为按钮添加边框样式；通过设置 border-radius 属性四个角的值，展示不同的边框圆角样式。

知识点

边框

以下知识内容来自于菜鸟教程

border

简写属性在一个声明设置所有的边框属性。

属性值

可以按顺序设置如下属性：

border-width

border-style

border-color

border-style

属性指定要显示的边框类型。

属性值

dotted ：定义点线边框。

dashed：定义虚线边框。

solid：定义实线边框。

double：定义双边框。

groove：定义 3D 坡口边框。效果取决于 border-color 值。

ridge：定义 3D 脊线边框。效果取决于 border-color 值。

inset：定义 3D inset 边框。效果取决于 border-color 值。

outset：定义 3D outset 边框。效果取决于 border-color 值。

none：定义无边框。

hidden：定义隐藏边框。

border-width

属性指定四个边框的宽度。

属性值

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。

border-color

属性用于设置四个边框的颜色。

name：指定颜色名，比如 "red"。

HEX：指定十六进制值，比如 "#ff0000"。

RGB：指定 RGB 值，比如 "rgb(255,0,0)"。

HSL：指定 HSL 值，比如 "hsl(0, 100%, 50%)"。

transparent：透明。

border-radius

属性用于向元素添加圆角边框。

属性值

length：定义弯道的形状。

%：使用 %定义角落的形状。

border-image

用于绘制边框的图像

属性值

border-image-source：用于指定要用于绘制边框的图像的位置。

border-image-slice：图像边界向内偏移。

border-image-width：图像边界的宽度。

border-image-outset：用于指定在边框外部绘制 border-image-area 的量。

border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

讲解代码

https://code.juejin.cn/pen/7127496536879497223

讲解代码操作步骤

演示代码都可通过代码复制拷贝到本地的 IDE 中进行演示。也可以自己照着敲击学习。

第一步：选中一个想查看代码的功能项；

第二步：将查看的功能的代码进行复制；

第三步：将代码粘贴到一个空档 html 文档中；

第四步：右键操作这个新建的 html 文档，选择在浏览器中打开，刚才的功能就在页面中出来啦。

一个小习题

今天讲了很多边框的知识点，下面图片中的按钮，视觉上按钮像是被点击了一样，产生了内陷效果。今天的习题就是，如何实现图形内陷的效果？解答方案会在下篇文章中给出。

image

总结

在日常开发中经常会遇到为容器添加边框的场景，我们之前优惠券的样式就是在容器左右两侧有圆形内凹边框，最早都是直接采用图片背景的方式，后来就用设置 border 样式的方式替代了。

有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。

前端的千变万化，源于对前端知识的融会贯通。