如何使用HTML和CSS实现带交叉边框的套餐列表设计

完整实现代码 #

以下代码已修复原有语法错误，新增了INFINITY板块的交叉边框效果，整体布局和需求效果匹配：

<!doctype html>
<html lang="en">
<head>
    <title>Price List</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .plan-col {
            border: 1px solid #222;
            padding: 0;
            overflow: hidden;
        }
        .tx p {
            margin: 20px 0;
            padding: 0 10px;
        }
        /* 高亮套餐的交叉边框效果 */
        .featured-plan {
            position: relative;
            background-color: #dc3545;
            z-index: 1;
        }
        .featured-plan::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background: repeating-linear-gradient(
                45deg,
                #dc3545,
                #dc3545 10px,
                #fff 10px,
                #fff 20px
            );
            z-index: -1;
            opacity: 0.9;
        }
        .featured-plan h5 {
            padding-top: 10px;
            font-weight: bold;
        }
        .row > * {
            padding: 0;
        }
        .attr-cell {
            border: 1px solid #222;
            padding: 20px 0;
        }
    </style>
</head>
<body>
<div class="container my-5">
    <div class="row justify-content-center text-center g-0">
        <div class="col-lg-2 plan-col bg-dark text-light">
            <div class="pt-3 pb-2 border-bottom border-dark">
                <h4>套餐对比</h4>
            </div>
            <div class="tx">
                <p>网络速度</p>
                <p>无限流量</p>
                <p>月租金</p>
                <p>适用人群</p>
            </div>
        </div>

        <div class="col-lg-2 plan-col featured-plan text-light">
            <div class="pt-3 pb-2 border-bottom border-dark">
                <h5>INFINITY</h5>
            </div>
            <div class="tx">
                <p>1 Gbps</p>
                <p>✅</p>
                <p>₹3999</p>
                <p>游戏玩家、交易员、<br>直播博主等专业用户</p>
            </div>
        </div>
        
        <div class="col-lg-2 plan-col bg-danger text-light">
            <div class="pt-3 pb-2 border-bottom border-dark">
                <h4>PROFESSIONAL</h4>
            </div>
            <div class="tx">
                <p>300 Mbps</p>
                <p>✅</p>
                <p>₹1499</p>
                <p>居家办公<br>专业人士</p>
            </div>
        </div>
        
        <div class="col-lg-2 plan-col bg-light text-dark">
            <div class="pt-3 pb-2 border-bottom border-dark">
                <h4>ENTERTAINMENT</h4>
            </div>
            <div class="tx">
                <p>200 Mbps</p>
                <p>✅</p>
                <p>₹999</p>
                <p>追剧爱好者</p>
            </div>
        </div>
        
        <div class="col-lg-2 plan-col bg-secondary text-light">
            <div class="pt-3 pb-2 border-bottom border-dark">
                <h4>STANDARD</h4>
            </div>
            <div class="tx">
                <p>100 Mbps</p>
                <p>✅</p>
                <p>₹799</p>
                <p>轻度使用的<br>小家庭</p>
            </div>
        </div>
        
        <div class="col-lg-2 plan-col bg-secondary text-light">
            <div class="pt-3 pb-2 border-bottom border-dark">
                <h4>BASIC</h4>
            </div>
            <div class="tx">
                <p>40 Mbps</p>
                <p>✅</p>
                <p>₹499</p>
                <p>轻度使用的<br>个人用户</p>
            </div>
        </div>

        <div class="col-lg-2 attr-cell bg-secondary text-light">
            流媒体<br>会员权益
        </div>
        <div class="col-lg-6 attr-cell bg-dark text-light">
            Amazon Prime + Disney+ Hotstar
        </div>
        <div class="col-lg-2 attr-cell bg-dark text-light">
            ❌
        </div>
        <div class="col-lg-2 attr-cell bg-dark text-light">
            ❌
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>
</body>
</html>

关键实现说明 #

• 交叉边框通过repeating-linear-gradient实现45度斜向条纹，用伪元素挂载到高亮套餐顶部，层级低于文字避免遮挡内容
• 统一了所有单元格的边框、边距，修复原有布局错位问题
• 修复了原代码中标签未闭合、结构嵌套错误的问题

内容的提问来源于stack exchange，提问作者SushantUniversity