伪元素边框特效演示
<style>.bdbox {
margin: 60px auto;
padding: 20px;
width: 600px;
height: 260px;
border: 4px dotted gray;
position: relative;
--offset: 12;
}
.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;
}
.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>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>代码<br><br></h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"><span class="tGreen">/* 宿主元素基本样式 --offset变量为伪元素外偏移变量 */</span></cl-cd>
<cl-cd data-idx="3">.bdbox {</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">margin:</span> 60px auto;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">padding:</span> 20px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">width:</span> 600px;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">height:</span> 260px;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">border:</span> 4px dotted gray;</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">--offset:</span> 12;</cl-cd>
<cl-cd data-idx="11">}</cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<cl-cd data-idx="13"><span class="tGreen">/* 伪元素共性样式 其中：宽高均在100%基础上 + 外偏移量 × 2 */</span></cl-cd>
<cl-cd data-idx="14">.bdbox::before, .bdbox::after {</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">width:</span> calc(100% + <span class="tBlue">var</span>(--offset) * 2px);</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">height:</span> calc(100% + <span class="tBlue">var</span>(--offset) * 2px);</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">border:</span> 20px groove tan;</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">box-sizing:</span> border-box;</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">transition:</span> 2s;</cl-cd>
<cl-cd data-idx="22">}</cl-cd>
<cl-cd data-idx="23"><span class="tGreen">/* 伪元素一 ：上、左偏移; 边框右、下透明 */</span></cl-cd>
<cl-cd data-idx="24">.bdbox::before {</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">top:</span> calc(<span class="tBlue">var</span>(--offset) * -1px);</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">left:</span> calc(<span class="tBlue">var</span>(--offset) * -1px);</cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">border-color:</span> tan transparent transparent tan;</cl-cd>
<cl-cd data-idx="28">}</cl-cd>
<cl-cd data-idx="29"><span class="tGreen">/* 伪元素二 ：下、右偏移; 边框左、上透明 */</span></cl-cd>
<cl-cd data-idx="30">.bdbox::after {</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">bottom:</span> calc(<span class="tBlue">var</span>(--offset) * -1px);</cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">right:</span> calc(<span class="tBlue">var</span>(--offset) * -1px);</cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">border-color:</span> transparent tan tan transparent;</cl-cd>
<cl-cd data-idx="34">}</cl-cd>
<cl-cd data-idx="35"><span class="tGreen">/* 设备指针移动到元素时令伪元素宽高变为 30% */</span></cl-cd>
<cl-cd data-idx="36">.<span class="tBlue">bdbox:</span>hover::before, .<span class="tBlue">bdbox:</span>hover::after {</cl-cd>
<cl-cd data-idx="37"> <span class="tBlue">width:</span> 30%;</cl-cd>
<cl-cd data-idx="38"> <span class="tBlue">height:</span> 30%;</cl-cd>
<cl-cd data-idx="39">}</cl-cd>
<cl-cd data-idx="40"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="41"> </cl-cd>
<cl-cd data-idx="42"><<span class="tDarkRed">div</span> class=<span class="tMagenta">"bdbox"</span>></cl-cd>
<cl-cd data-idx="43"> <<span class="tDarkRed">h</span>2 style=<span class="tMagenta">"<span class="tBlue">margin:</span> 0 0 10px 0;"</span>>伪元素边框特效<<span class="tDarkRed">/h</span>2></cl-cd>
<cl-cd data-idx="44"> 宿主元素 ：<span class="tBlue">border:</span> 4px dotted gray;<<span class="tDarkRed">br</span>></cl-cd>
<cl-cd data-idx="45"> 伪元素 ：border ：20px groove red;<<span class="tDarkRed">br</span>></cl-cd>
<cl-cd data-idx="46"> 伪元素 ::before ：<span class="tBlue">border-color:</span> tan transparent transparent tan;<<span class="tDarkRed">br</span>></cl-cd>
<cl-cd data-idx="47"> 伪元素 ::after ：<span class="tBlue">border-color:</span> transparent tan tan transparent; </cl-cd>
<cl-cd data-idx="48"><<span class="tDarkRed">/div</span>></cl-cd>
</div> 又看到一个好玩的。。
碰一下边框自动收缩变虚线了。。
又跟活的一样。{:4_199:} 贴子里整这么一个可爱的好玩的边框也是好看。。{:4_170:} 南无月 发表于 2024-5-30 12:35
又看到一个好玩的。。
碰一下边框自动收缩变虚线了。。
又跟活的一样。
这个和天策帖子原理一致：都是利用伪元素尺寸大于宿主元素的方式实现。
伪元素开始时最大化，鼠标指针移动过来时变小。两个伪元素边框颜色，都是两边透明两边有颜色。 南无月 发表于 2024-5-30 12:36
贴子里整这么一个可爱的好玩的边框也是好看。。
border-radius 设置50%，加上边框样式为 double，就和那个帖子差不多了 这个边框设置真漂亮，色彩搭配十分协调{:4_187:} 用伪元素可以把四条边分组了呢，然后可以按小组为单位活动了{:4_173:} 边框样式groove创建一个3D凹槽效果的边框。创造出来的边框居然这么漂亮{:4_187:} 红影 发表于 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，就和那个帖子差不多了
这样就圆了。。这个好，用老师给的方法试下{:4_170:} 马黑黑 发表于 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 : 边框样式
好哒，这个语法糖就是鸡尾酒似的呗{:4_170:} 马黑黑 发表于 2024-5-30 18:03
边框的学问其实不太多
记住还要灵活运用 南无月 发表于 2024-5-30 20:39
记住还要灵活运用
是的 南无月 发表于 2024-5-30 20:39
好哒，这个语法糖就是鸡尾酒似的呗
简洁