们学习如何应用CSS给元素添加边框。

CSS边框属性，允许我们指定一个元素边框的样式、宽度和颜色。

我们先来学习元素边框的样式。border-style 属性指定了要显示什么样的边框。允许使用以下的值：

dotted，定义一个点状的边框

dashed ，定义一个虚线边框

solid，定义一个实线边框

double，定义一个双倍的边框

none，定义无边框

hidden，定义一个隐藏的边框

我们来实验一下。

创建一个 009-css-borders 文件夹，在文件夹里创建一个 css-borders.html 文件和一个border-style.css 文件。

构建 html 基础代码，引入样式文件。

编写 p.dotted 回车，填入文本点状的边框。按照同样的方法，添加其他的几个边框结构。

<p>点状的边框</p>

<p>虚线边框</p>

<p>实线边框</p>

<p>双倍的边框</p>

<p>无边框</p>

<p>隐藏的边框</p>

<p>混合边框</p>

<p>速记边框</p>

在 css 里定义 p.dotted 选择器，声明样式 border-style: dotted。定义其他几个选择器，全部声明 border-style 属性，值分别为：dashed、solid、double、none、hidden。

在浏览器里查看结果，边框的效果都做好了。

border-style: none 和 border-style: hidden 视觉上都不显示边框，有什么区别呢？

在 html 里编写：table 大于 括号 tr 大于 td 乘以3 再乘以3 （table>(tr>td*3)*3）。回车，创建一个3行3列的表格。给 table 元素定义border属性，值为 1。 给第二行第一个和第二个td 定义 class属性，值分别为 lm、m。

在 css 里定义 table 选择器，声明样式 border-collapse: collapse，让表格线细一些。这个属性我们在后面会详细讲解。

定义 td.lm 选择器，声明样式 border-style: dashed。定义 td.m 选择器，声明样式 text-align: center。

看一下效果，左中和左上、中以及左下边框是相邻的，在这些单元格上定义边框样式一定会产生冲突。

给 td.m 选择器添加样式声明 border-style: none。

我们看，没有去掉任何边框。

再把 border-style 属性值改为 hidden。

我们再看，中间的 td 边框消失了，当然，左侧相邻的边框也消失了。

当表格单元格相邻边框产生冲突时，border-style: hidden 优先级最高，border-style: solid 优先级次之，border-style: none 优先级最低。

还是这个表格示例，单元格左中和中之间用点线来分隔。如何实现呢？

在 td.m 选择器里将 border-style 的值改为 dotted。

很显然，并不是我们要的效果。看来，得把单元格左中的右边线隐藏。如何控制一条边框线呢？

可以在 border-style 中间添加一个表示方位的词，就可以设置单个边框线了。

比如，给 td.lm 选择器声明 border-right-style 属性，就可以设置这个单元格右边框样式了，这里设置的值为 none。

效果实现了。

把这里的 border-right-style 的值设置为 hidden 是什么效果呢

通过这个例子发现，可以分别指定每个边框的样式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用来设置元素的上、右、下、左边框的样式。

除了单个样式属性外，border-style 的属性值，还可以使用混合的简写方法。有四种写法：

第一种写法：四个值，分别代表上边、右边、下边、左边的边框样式。从顶部开始，按照顺时针方向来设置值。比如 border-style: dotted solid double dashed，设置上边框为虚线、右边框为实线、下边框为双线、左边框为虚线。

第二种写法：三个值，分别代表上边、左右边、下边的边框样式。第一个值表示上边框的样式、第二个值表示左边和右边框的样式，第三个值表示下边框的样式。比如 border-style: dotted solid double，设置顶部边框为虚线、左右边框为实线，底部边框是双线。

第三种写法：两个值，分别表示上下边，左右边的边框样式。第一个值表示上下边框的样式、第二个值表示左右边框的样式。比如 border-style: dotted solid，设置顶部和底部的边框是点状的、右边和左边的边框是实心的。

第四种写法：一个值，表示四个边框的样式。比如 border-style: dotted，四个边都是点状边框。

在 html 里添加一个 p 元素，定义 属性。填入一些文本。

在 css 里定义 p.mix 选择器，声明样式 border-style: dotted dashed solid double。

最后一个段落的混合边框实现了。

除了设置边框样式，还可以设置边框的宽度。

border-width 属性用于设置四个边框的宽度。宽度可以被设置为一个特定的尺寸，以 px、em等为单位，或者使用三个预定义的值： thin、medium、thick——薄、中、厚。

给前三个 p 元素全部声明 border-width 样式属性，值分别为 5px，0.5em，thick。

三个段落的边框线宽度就添加好了。

和边框样式 border-style 属性一样，边框宽度的值也可以使用混合的简写方法，可以给 border-width 设置四个值、三个值、两个值或一个值。

给第四个 p 元素添加 border-width: 5px 10px; 样式。

我们看，这个边框宽度上下是 5 像素，左右是 10 像素。

再给最后一个 p 元素添加 border-width: 2px 3px 4px 5px 样式。

这样，四边不同的边框，就拥有了不同的宽度！

除了设置边框样式，还可以设置边框的颜色。

border-color 属性用于设置四个边框的颜色。可以通过颜色名称、十六进制颜色值、RGB颜色值来设置颜色，也可以通过 transparent 来设置透明。

给前三个 p 元素全部声明 border-color 样式属性，值分别为 red，#00ff00，rgb(0, 0, 255)。

三个段落的边框线颜色就添加好了。

和边框样式 border-style 属性一样，边框颜色的值也可以使用混合的简写方法，可以给 border-color 设置四个值、三个值、两个值或一个值。

给第四个 p 元素添加 border-color: purple orange 样式。

我们看，这个边框上下是紫色，左右是橙色。

再给最后一个 p 元素添加 border-color: red green blue yellow 样式。

这样，四边不同的边框，就拥有了不同的颜色！

和字体 font 属性一样，边框也可以使用速记属性。为了缩短代码，可以在一个 border 属性中指定 border-style、border-width、border-color 等单独的边框属性。比如：border: 5px solid red，表示设置元素的边框宽度为5像素，边框样式为实线，边框颜色为红色。

注意，border-style 是必须要声明的，其他两个可以省略，省略后会采用 1 像素、黑色线这两个默认值。

在 html 里添加一个 p 元素，定义 属性。填入一些文本。

在 css 里定义 p.shorthand 选择器，声明样式 border: 5px solid #ccc。

一行样式代码就实现了边框样式、宽度和颜色的设置！

这个简写的方法默认四个边，全部定义了相同的边框。能不能定义单个边呢？可以的！

很自然的猜到，通过声明 border-top，border-right，border-bottom，border-left 四个属性，值为上面简写的方式，就可以单独定义元素的某一条边了。

注释掉这行代码，再声明一个 border-bottom 属性，值同样是 5px solid #ccc。

一行代码，同样实现了一条底部的边框线

这个网站（minimal-portfolio-swart.vercel.app）发现一个不错的交互效果，用户体验效果很不错。如上图所示，这个卡片上有一根白色的线条围绕着卡片移动，且在线条的卡片内部跟随这一块模糊阴影，特别是在线条经过卡片圆角部分有特别丝滑的感觉。

今天的文章就来解析如何实现这种效果，文末附源码预览地址。根据示例图片分析需要实现的功能点如下：

• 线条跟随卡片边框匀速移动
• 线条内部对应有模糊阴影
• 圆角部分丝滑动画

这里为什么单独说明圆角部分是因为这块需要特殊处理，请看后面的文章。

思考

看到这个效果首先感觉是丝滑，沿着边框移动的动画元素如果是根据当前边框实时计算而来的话，那么难度和算法会劝退很多人。

需要换一种思路，本质移动的线条元素和边框并没有关系，而是一个元素沿着边框移动，线条和卡片内部的阴影就是一个元素，通过某种透视的方式产生了这种效果。

透视

通过透视的方式实现一个边框效果，我们可以用2个盒子嵌套，父级设置1像素的padding，如下代码简单的实现一个边框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果图：

然后增加一个子元素作为移动的元素，这个元素基于父级定位在边框位置，由于动画是沿着卡片内部四周移动，要确保在每一条边上的透出的长度保持一致，所有创建的这个子元素是一个正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并对这个元素增加简单的animation动画，沿着内边框移动。

这个动画需要注意的一个点是要使元素在移动的过程中保持匀速的动画，需要计算每个关键帧之间的距离，并根据这些距离来调整每个关键帧的百分比。这样可以确保元素在每个时间段内移动的距离与时间成正比，从而实现真正的匀速移动。

这里我们以上面的卡片举例，其宽度为400px，高度为200px，元素沿矩形的边框移动。

• 计算总路径长度：总长度=2 (宽度 + 高度)=2 (400px + 200px)=1200px
• 计算每段所占的时间比例：水平边所占比例=400px / 1200px=1/3 ≈ 33.33%，垂直边所占比例=200px / 1200px=1/6 ≈ 16.67%

动画代码如下：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最终完成的简单版动画效果如下：

这里为了方便大家看增加了透明度展示内部移动的元素，若去掉透明度则只有边框上的一根线。

边框效果处理

仔细看上面的图可以发现在边框尽头时的过渡效果不好，瞬间从一条边切换到另一条边。首先还原网站的效果，增加边框圆角，然后将内部移动的元素通过圆角变成一个圆形，这时候还需要同步调整内部元素的定位和动画移动时设置的定位，保证内部圆形的中心和边框的一致。

增加圆角处理：

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圆心和边框一致 */
  transform: translate(-40px, -40px);
}

调整动画过程中的定位：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此时的动画效果：

此时的边框位置动画已经很接近网站的效果，进一步观察在图中的效果可以发现在边框角落的位置有一点卡顿的感觉，这是因为边框位置我们设置了圆角，但是元素移动的轨迹是直角，导致视觉上停顿了一下。这里我们需要进一步优化animation。设置圆角后内部动画元素移动的点应该从4个变成8个，且对应的位置需要和圆角的大小一一对应才能保障流畅的动画效果。

如下所示黑色圆点是到四个顶点的动画坐标，新的绿色圆点是基于圆角后的动画移动坐标。

基于上面的动画百分比算法计算出最新的比例及坐标代码如下：

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

这里的动画需要注意的是圆角部分绿色按钮之间的动画距离需要使用使用勾股定理计算。比如右上角的两个点之间的计算方式是：

从 (360, 0) 到 (400, 40)=√((400-360)2 + (40-0)2)=√(1600 + 1600)=√3200 ≈ 56.57px

此时的动画效果：

模糊阴影

现在就差最后的阴影部分还未实现，仔细观察移动的线条并不是全实心纯色，而是有渐变的效果，目前移动的元素是一个正方形，设置背景色为径向渐变即可，修改背景色的代码如下：

background-image: radial-gradient(#fff 40%,transparent 80%);

现在还需要将内部的渐变进一步模糊，注意这里仅仅是模糊元素背后的背景，不能影响卡片上面其他的元素内容展示。这里我们使用backdrop-filter设置blur模糊效果。

CSS属性 backdrop-filter 用于在元素后面的区域上应用图形效果（如模糊或颜色偏移）。这个属性可以让你对元素背后的背景进行处理，而不影响元素本身的前景内容。

最后进一步调整颜色还原网站的效果如下：

这个效果不仅可以做卡片展示，作为按钮的背景效果也很不错：

最后

到此整体的代码实现过程就结束了，完整还原的网站的动画效果。这是一个对用户体验很不错的卡片效果，原网站实现的部分细节不一样，整体实现原理差不多，基于两个元素的1像素间距透出移动的线条，配合使用backdrop-filter设置纯背景模糊效果，有兴趣的可以尝试看看。

作者:南城

来源-微信公众号:南城大前端

出处:https://mp.weixin.qq.com/s/g-_3iD97PxmGL7RGwRrSvg