使用CSS伪元素实现虚线圆角渐变边框

问题

想实现虚线且渐变还带有圆角边框使用原生方法是无法做到的,比如box-image会覆盖所有属性,圆角和边框样式都会被覆盖,现在发现可以使用伪元素来结合使用实现改功能

示例代码

<div class="parent">
	<div class="child">内容1</div>
	<div class="child">内容2222</div>
	<div class="child">内容3333333333</div>
	<div class="child"><div>内容</div><div>44444</div></div>
</div>

<style lang="less">
	.parent{
		.child{
			display: inline-block;
        	padding: 10px;
       		margin: 5px;
        	min-width: 60px;
		}
	}
</style>

实现步骤

1. 使用伪元素来创建内容遮盖层,并置于底层
   

.parent {
	.child{
        display: inline-block;
        padding: 10px;
        margin: 5px;
        min-width: 60px;
        position: relative;
        border-radius: 6px;
        //置于顶层
        z-index: 1;

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            //圆角
            border-radius: 6px;
            //置于底层
            z-index: -1;
        }

        &::before {
        	// 渐变色边框
            background: linear-gradient(to right, black, #8f41e9, red, #578aef); 
            //定位
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 8px;
        }

        &::after {
            background-color: #fff; // 白色背景，确保内容区域的颜色
        }
	}
}

2.添加mask标记来覆盖
添加到 &::before样式中

&::before {
	background: linear-gradient(to right, black, #8f41e9, red, #578aef); // 渐变色边框
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	border-radius: 8px;
	//兼容其他浏览器
	-webkit-mask: repeating-linear-gradient(135deg, #000, #000 27px, transparent 3px, transparent 30px);
	//绘画白色区域27px,然后间隔3px为透明背景,按照每隔(27px+3px)30px执行一次绘画
	mask: repeating-linear-gradient(135deg, #000, #000 27px, transparent 3px, transparent 30px);
	mask-composite: exclude;
}

最终完整代码

<div class="parent">
	<div class="child">内容1</div>
	<div class="child">内容2222</div>
	<div class="child">内容3333333333</div>
	<div class="child"><div>内容</div><div>44444</div></div>
</div>

.parent {
    .child {
        display: inline-block;
        padding: 10px;
        margin: 5px;
        min-width: 60px;
        position: relative;
        border-radius: 6px;
        z-index: 1;

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 6px;
            z-index: -1;
        }

        &::before {
            background: linear-gradient(to right, black, #8f41e9, red, #578aef);
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 8px;
            -webkit-mask: repeating-linear-gradient(135deg, #000, #000 27px, transparent 3px, transparent 30px);
            mask: repeating-linear-gradient(135deg, #000, #000 27px, transparent 3px, transparent 30px);
            mask-composite: exclude;
        }

        &::after {
            background-color: #fff; // 白色背景，确保内容区域的颜色
        }
    }
}