2024年5月30日 星期四
边框特效代码
<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-28 20:15
收到收到。。。。下回还敢