CSS渐变虚框效果实例页面

CSS代码：

.box {
    width: 200px;
    height: 150px;
    border: 2px dashed #cd0000;
    box-sizing: border-box;
}
@supports (-webkit-mask: none) or (mask: none) {
.box {
    border: none;
    background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px),  linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px);
    -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0;
    -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
    /* 合并写法 */
    mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
    linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
    linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
    linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
    mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
}    
}
                

HTML代码：

<div class="box"></div>