设置底部边框 | 开创者教程

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开创者教程(kaicz.com)</title>
    <style>
        /* 只设置边框样式为实线 */
        .demo1 { 
            border-bottom: solid; 
            margin: 20px;
            padding: 10px;
        }

/* 设置边框宽度和样式 */
        .demo2 { 
            border-bottom: 3px dashed;
            margin: 20px;
            padding: 10px;
        }

/* 设置边框样式和颜色 */
        .demo3 { 
            border-bottom: dotted blue;
            margin: 20px;
            padding: 10px;
        }

/* 完整设置边框宽度、样式和颜色 */
        .demo4 { 
            border-bottom: 2px double #ff9900;
            margin: 20px;
            padding: 10px;
        }

/* 使用相对单位设置边框宽度 */
        .demo5 { 
            border-bottom: thick solid green;
            margin: 20px;
            padding: 10px;
        }
        
        /* 容器样式 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }
        
        h2 {
            color: #333;
        }
        
        .code {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS border-bottom 属性演示</h1>
        
        <h2>1. 只设置边框样式为实线</h2>
        <div class="code">p { border-bottom: solid; }</div>
        <p class="demo1">这个段落底部有一条默认宽度(通常是1px)的实线边框。</p>
        
        <h2>2. 设置边框宽度和样式</h2>
        <div class="code">h1 { border-bottom: 3px dashed; }</div>
        <h1 class="demo2">这个标题底部有一条3像素宽的虚线边框。</h1>
        
        <h2>3. 设置边框样式和颜色</h2>
        <div class="code">div { border-bottom: dotted blue; }</div>
        <div class="demo3">这个div底部有一条默认宽度的蓝色点线边框。</div>
        
        <h2>4. 完整设置边框宽度、样式和颜色</h2>
        <div class="code">span { border-bottom: 2px double #ff9900; }</div>
        <span class="demo4">这个span元素底部有一条2像素宽的橙色双线边框。</span>
        
        <h2>5. 使用相对单位设置边框宽度</h2>
        <div class="code">button { border-bottom: thick solid green; }</div>
        <button class="demo5">这个按钮底部有一条粗的绿色实线边框。</button>
    </div>
</body>
</html>