CSS3双线边框：实现炫酷边框效果

/* 定义基本的装饰线样式 */
.decoration-line {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
}
 
/* 定义装饰线上的线条样式 */
.decoration-line::before,
.decoration-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    border-top: 2px solid #333;
    border-bottom: 2px solid #555;
    background-image: linear-gradient(to right, rgba(255,255,255,.3), rgba(255,255,255,0));
}
 
/* 定义装饰线下的线条样式 */
.decoration-line::before {
    top: 50%;
    transform: translateY(-50%);
}
 
/* 定义装饰线下的线条样式 */
.decoration-line::after {
    top: 50%;
    transform: translateY(50%);
}

这段代码定义了一个具有炫酷双线边框效果的装饰线容器。它使用了CSS伪元素 ::before 和 ::after 来创建两条线，分别位于容器的上部和下部，从而形成一种双线边框的视觉效果。代码中使用了线性渐变和透明度来增强视觉效果，并通过CSS变换进行定位调整。