伪元素边框特效演示

马黑黑

伪元素边框特效

宿主元素 ：border: 4px dotted gray;
伪元素 ：border ：20px groove red;
伪元素 ::before ：border-color: tan transparent transparent tan;
伪元素 ::after ：border-color: transparent tan tan transparent;

马黑黑

代码

<style> /* 宿主元素基本样式 --offset变量为伪元素外偏移变量 */ .bdbox {     margin: 60px auto;     padding: 20px;     width: 600px;     height: 260px;     border: 4px dotted gray;     position: relative;     --offset: 12; }   /* 伪元素共性样式 其中：宽高均在100%基础上 + 外偏移量 × 2 */ .bdbox::before, .bdbox::after {     position: absolute;     content: '';     width: calc(100% + var(--offset) * 2px);     height: calc(100% + var(--offset) * 2px);     border: 20px groove tan;     box-sizing: border-box;     transition: 2s; } /* 伪元素一 ：上、左偏移; 边框右、下透明 */ .bdbox::before {     top: calc(var(--offset) * -1px);     left: calc(var(--offset) * -1px);     border-color: tan transparent transparent tan; } /* 伪元素二 ：下、右偏移; 边框左、上透明 */ .bdbox::after {     bottom: calc(var(--offset) * -1px);     right: calc(var(--offset) * -1px);     border-color: transparent tan tan transparent; } /* 设备指针移动到元素时令伪元素宽高变为 30% */ .bdbox:hover::before, .bdbox:hover::after {     width: 30%;     height: 30%; } </style>   <div class="bdbox">     <h2 style="margin: 0 0 10px 0;">伪元素边框特效</h2>     宿主元素 ：border: 4px dotted gray;<br>     伪元素 ：border ：20px groove red;<br>     伪元素 ::before ：border-color: tan transparent transparent tan;<br>     伪元素 ::after ：border-color: transparent tan tan transparent;    </div>

南无月

又看到一个好玩的。。
碰一下边框自动收缩变虚线了。。
又跟活的一样。

南无月

贴子里整这么一个可爱的好玩的边框也是好看。。

马黑黑

南无月 发表于 2024-5-30 12:35
又看到一个好玩的。。
碰一下边框自动收缩变虚线了。。
又跟活的一样。

这个和天策帖子原理一致：都是利用伪元素尺寸大于宿主元素的方式实现。

伪元素开始时最大化，鼠标指针移动过来时变小。两个伪元素边框颜色，都是两边透明两边有颜色。

马黑黑

南无月 发表于 2024-5-30 12:36
贴子里整这么一个可爱的好玩的边框也是好看。。

border-radius 设置50%，加上边框样式为 double，就和那个帖子差不多了

红影

这个边框设置真漂亮，色彩搭配十分协调

红影

用伪元素可以把四条边分组了呢，然后可以按小组为单位活动了

红影

边框样式groove创建一个3D凹槽效果的边框。创造出来的边框居然这么漂亮

马黑黑

红影 发表于 2024-5-30 14:03
边框样式groove创建一个3D凹槽效果的边框。创造出来的边框居然这么漂亮

样式由好几种的：

dotted ：显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半

dashed ：显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定

solid ：显示为一条实线

double ：显示为一条双实线，宽度是 border-width

groove ：显示为有雕刻效果的边框，样式与 ridge 相反

ridge ：显示为有浮雕效果的边框，样式与 groove 相反

inset ：显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式

outset ：显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式

马黑黑

红影 发表于 2024-5-30 14:02
用伪元素可以把四条边分组了呢，然后可以按小组为单位活动了

这是实现效果的原理

马黑黑

红影 发表于 2024-5-30 13:57
这个边框设置真漂亮，色彩搭配十分协调

只是简单将 border-color 设置为 tan

南无月

马黑黑 发表于 2024-5-30 12:39
border-radius 设置50%，加上边框样式为 double，就和那个帖子差不多了

这样就圆了。。这个好，用老师给的方法试下

南无月

马黑黑 发表于 2024-5-30 12:38
这个和天策帖子原理一致：都是利用伪元素尺寸大于宿主元素的方式实现。

伪元素开始时最大化，鼠标指针 ...

好哒，这个说得详细，帮助小白理解特别好。。

马黑黑

南无月 发表于 2024-5-30 17:58
好哒，这个说得详细，帮助小白理解特别好。。

边框也就这些东东了：

border-style : 边框样式
border-width : 边框厚度
border-color : 边框颜色
border-radius : 边框圆角半径

border-radius 是独立的属性。前三个在可以合在一起写（这叫语法糖）：

border: 1px outset red;

1px ：border-width
outset : border-style
red : border-color

马黑黑

南无月 发表于 2024-5-30 17:57
这样就圆了。。这个好，用老师给的方法试下

边框的学问其实不太多

南无月

马黑黑 发表于 2024-5-30 18:01
边框也就这些东东了：

border-style : 边框样式

好哒，这个语法糖就是鸡尾酒似的呗

南无月

马黑黑 发表于 2024-5-30 18:03
边框的学问其实不太多

记住还要灵活运用

马黑黑

南无月 发表于 2024-5-30 20:39
记住还要灵活运用

是的

马黑黑

南无月 发表于 2024-5-30 20:39
好哒，这个语法糖就是鸡尾酒似的呗

简洁