设置元素下班框宽度

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-bottom-width 演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            color: #333;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }
        
        .example-box {
            margin: 20px 0;
            padding: 15px;
            background-color: #f9f9f9;
        }
        
        /* 使用关键字 thin */
        .example1 {
            border-bottom-style: solid;
            border-bottom-width: thin;
            border-bottom-color: #3498db;
        }
        
        /* 使用具体像素值 */
        .example2 {
            border-bottom-style: dashed;
            border-bottom-width: 2px;
            border-bottom-color: #e74c3c;
        }
        
        /* 使用 em 单位 */
        .example3 {
            border-bottom-style: dotted;
            border-bottom-width: 0.5em;
            border-bottom-color: #2ecc71;
        }
        
        /* 与其他边框属性一起使用 */
        .example4 {
            border-bottom-width: 4px;
            border-bottom-style: solid;
            border-bottom-color: #ff0000;
        }
        
        /* 简写形式对比 */
        .example-shorthand {
            border-bottom: 3px double #9b59b6;
        }
        
        .code {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 3px;
            font-family: monospace;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>CSS border-bottom-width 属性演示</h1>
    
    <div class="example-box example1">
        <h2>示例1: 使用关键字 thin</h2>
        <p>这个例子使用了 <code>border-bottom-width: thin;</code> 来设置细边框。</p>
        <div class="code">
.example1 {
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #3498db;
}
        </div>
    </div>
    
    <div class="example-box example2">
        <h2>示例2: 使用具体像素值 (2px)</h2>
        <p>这个例子使用了 <code>border-bottom-width: 2px;</code> 来设置2像素宽的虚线边框。</p>
        <div class="code">
.example2 {
    border-bottom-style: dashed;
    border-bottom-width: 2px;
    border-bottom-color: #e74c3c;
}
        </div>
    </div>
    
    <div class="example-box example3">
        <h2>示例3: 使用 em 单位 (0.5em)</h2>
        <p>这个例子使用了 <code>border-bottom-width: 0.5em;</code> 来设置相对单位边框。</p>
        <div class="code">
.example3 {
    border-bottom-style: dotted;
    border-bottom-width: 0.5em;
    border-bottom-color: #2ecc71;
}
        </div>
    </div>
    
    <div class="example-box example4">
        <h2>示例4: 与其他边框属性一起使用</h2>
        <p>这个例子展示了如何组合使用 <code>border-bottom-width</code>, <code>border-bottom-style</code> 和 <code>border-bottom-color</code>。</p>
        <div class="code">
.example4 {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #ff0000;
}
        </div>
    </div>
    
    <div class="example-box example-shorthand">
        <h2>简写形式对比</h2>
        <p>这个例子展示了使用简写属性 <code>border-bottom</code> 的等效写法。</p>
        <div class="code">
.example-shorthand {
    border-bottom: 3px double #9b59b6;
    /* 等同于:
    border-bottom-width: 3px;
    border-bottom-style: double;
    border-bottom-color: #9b59b6;
    */
}
        </div>
    </div>
</body>
</html>