HTML / CSS大前端

CSS 盒子模型与美化技巧：边框阴影圆角详解

综述由AI生成详细阐述了 CSS 盒子模型的构成，包括内容区、内边距、边框和外边距的作用及相互关系。重点解析了外边距合并（塌陷）现象及其三种解决方案。此外，介绍了圆角边框、盒子阴影和文字阴影的语法参数与实战案例，展示了如何通过 CSS 属性提升页面视觉质感与交互体验。

CoderByte发布于 2026/4/5更新于 2026/5/2436 浏览

CSS 盒子模型

在网页布局的世界里，CSS 盒子模型是一切布局的基础。无论是简单的文本段落还是复杂的页面组件，都可以被看作是一个个矩形的"盒子"。掌握盒子模型的工作原理，是成为前端开发者的必备技能。

1. 什么是 CSS 盒子模型？

CSS 盒子模型是一种将 HTML 元素视为矩形盒子的布局模型，每个盒子由四个部分组成：

内容区（content）：元素实际内容所在的区域
内边距（padding）：内容区与边框之间的空间
边框（border）：围绕内边距和内容区的线条
外边距（margin）：盒子与其他盒子之间的空间

这四个部分共同决定了元素在页面中的大小和位置，是页面布局的三大核心之一（另外两个是浮动和定位）。

2. 边框（border）：盒子的"外衣"

边框是盒子最外层的可见边界，由三个属性共同定义：宽度、样式和颜色。

边框的基本属性

#div1 {
    width: 300px;
    height: 200px;
    border-width: 10px; /* 边框宽度 */
    border-style: solid; /* 边框样式 */
    border-color: pink; /* 边框颜色 */
}

也可以使用简写形式，顺序可以任意调整：

#div1 {
    border: 10px solid pink; /* 宽度 样式 颜色 */
}

边框样式是必须指定的属性，常用值包括：

solid：实线边框
dashed：虚线边框
dotted：点线边框

单边边框设置

我们可以单独设置盒子四个方向的边框，利用 CSS 的层叠性可以简化代码：

#div2 {
    width: 200px;
    height: 200px;
    border: 5px solid blue; /* 先设置四边为蓝色 */
    border-top: 5px solid red; /* 再单独设置上边框为红色 */
}

边框对盒子大小的影响

table, td, th {
    border: 1px solid pink;
    border-collapse: collapse; /* 合并相邻边框 */
}

.div3 {
    /* 1 个值：上下左右都为 5px */
    /* padding: 5px; */
    /* 2 个值：上下 5px，左右 10px */
    /* padding: 5px 10px; */
    /* 3 个值：上 5px，左右 10px，下 20px */
    /* padding: 5px 10px 20px; */
    /* 4 个值：上 5px，右 10px，下 20px，左 30px（顺时针方向） */
    padding: 5px 10px 20px 30px;
}

#nav {
    height: 41px;
    line-height: 41px; /* 垂直居中 */
    background-color: #fcfcfc;
}
#nav a {
    display: inline-block;
    padding: 0 20px; /* 左右内边距撑开盒子 */
    text-decoration: none;
}

.div5 {
    width: 300px;
    height: 100px;
    background-color: pink;
}
.div5 p {
    padding: 50px; /* p 元素没有指定宽高，不会超出父元素 */
}

.header {
    width: 500px;
    height: 200px;
    background-color: skyblue;
    margin: 100px auto; /* 上下 100px，左右自动居中 */
}

#father {
    width: 400px;
    height: 400px;
    background-color: purple;
    margin-top: 50px;
}
#son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 100px; /* 会导致父元素一起下移 */
}

#father {
    /* 其他样式不变 */
    overflow: hidden; /* 解决外边距塌陷 */
}

* {
    padding: 0; /* 清除内边距 */
    margin: 0; /* 清除外边距 */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        /* 注意，这句话应为我们使用 CSS 时的第一句话 */
        * { 
            padding: 0; /* 清除内边距 */
            margin: 0; /* 清除外边距 */
        }
        
        /* 1. border */
        #div1 {
            width: 300px;
            height: 200px;
            border-width: 10px;
            border-style: solid;
            border-color: pink;
        }
        
        /* 2. 边框分开写法 */
        #div2 {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            border-top: 5px solid red;
        }
        
        /* 3. 表格细线边框 */
        table, td, th {
            border: 1px solid pink;
            border-collapse: collapse;
        }
        
        /* 4. 内边距 padding */
        .div3 {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 5px 10px 20px 30px;
        }
        
        /* 5. 内边距的应用 */
        #nav {
            height: 41px;
            line-height: 41px;
            background-color: #fcfcfc;
        }
        #nav a {
            display: inline-block;
            padding: 0 20px;
            font-size: 15px;
            color: #4c4c4c;
            text-decoration: none;
        }
        #nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
        
        /* 6. 外边距 margin */
        .header {
            width: 500px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
        }
        
        /* 7. 外边距合并 */
        #father {
            width: 400px;
            height: 400px;
            background-color: purple;
            overflow: hidden;
        }
        #son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <table align="center">
        <thead><tr><th>排名</th><th>关键词</th></tr></thead>
        <tbody><tr><td>1</td><td>鬼吹灯</td></tr></tbody>
    </table>
    <div class="div3">这是盒子模型的内边距测试</div>
    <div id="nav"><a href="">新浪微博</a></div>
    <div class="header"><span>里面的文字，为行内元素</span></div>
    <div id="father"><div id="son"></div></div>
</body>
</html>

/* 基础语法 */
selector {
    border-radius: length; /* 可以是 px、% 等单位 */
}

.yuanxing {
    width: 300px;
    height: 300px; /* 宽高相等的正方形 */
    background-color: pink;
    border-radius: 50%; /* 半径=宽高的一半，形成圆形 */
}

.juxing {
    width: 300px;
    height: 100px; /* 高度是宽度的 1/3 */
    background-color: pink;
    border-radius: 50px; /* 50px = 100px 高度的一半 */
}

.radius1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 单独设置左上角圆角 */
    border-top-left-radius: 30px;
    /* 也可简写：border-radius: 10px 20px 30px 40px; */
}

selector {
    box-shadow: h-shadow v-shadow blur spread color inset;
}

.shadow1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    transition: box-shadow 0.3s; /* 平滑过渡 */
}
.shadow1:hover {
    /* 鼠标经过时显示阴影 */
    box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}

.shadow1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 水平 11px、垂直 17px、模糊 14px、半透明黑色阴影 */
    box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
}

selector {
    text-shadow: h-shadow v-shadow blur color;
}

#character {
    font-size: 50px;
    color: orange;
    font-weight: 700;
    /* 水平 5px、垂直 5px、模糊 6px、半透明黑色阴影 */
    text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

.glow-text {
    color: white;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de;
}

.product-card {
    width: 300px;
    padding: 20px;
    background: orange;
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */
}
.product-card h3 {
    font-size: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框 + 盒子阴影 + 文字阴影</title>
    <style>
        /* 1. 圆角边框 */
        .yuanxing {
            width: 300px;
            height: 300px;
            background-color: pink;
            border-radius: 50%;
        }
        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
        }
        .radius1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-top-left-radius: 30px;
        }
        
        /* 2. 盒子阴影 */
        .shadow1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
        .shadow1:hover {
            box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
        }
        
        /* 3. 文字阴影 */
        #character {
            font-size: 50px;
            color: orange;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
        }
        .glow-text {
            color: aqua;
            font-size: 100px;
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px aqua;
        }
        .product-card {
            width: 300px;
            padding: 20px;
            background: orange;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }
        .product-card h3 {
            font-size: 20px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <!-- 圆形 -->
    <div class="yuanxing"></div>
    <!-- 圆角矩形 -->
    <div class="juxing"></div>
    <div class="radius1"></div>
    <!-- 盒子阴影测试 -->
    <div class="shadow1"></div>
    <!-- 文字阴影测试 -->
    <div id="character">你是阴影，我是火影</div>
    <div class="glow-text">glow 测试</div>
    <div class="product-card">
        <h3>大夏境内，诸神禁行</h3>
    </div>
</body>
</html>

CSS 盒子模型与美化技巧：边框阴影圆角详解

CSS 盒子模型

1. 什么是 CSS 盒子模型？

2. 边框（border）：盒子的"外衣"

边框的基本属性

单边边框设置

边框对盒子大小的影响

CSS 盒子模型与美化技巧：边框阴影圆角详解

CSS 盒子模型

1. 什么是 CSS 盒子模型？

2. 边框（border）：盒子的"外衣"

边框的基本属性

单边边框设置

边框对盒子大小的影响

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

表格细线边框

3. 内边距（padding）：内容与边框的缓冲带

内边距的基本用法

内边距对盒子大小的影响

内边距的实用技巧

内边距不影响盒子大小的特殊情况

4. 外边距（margin）：盒子之间的距离

外边距的基本用法

外边距的典型应用：水平居中

外边距合并问题

清除默认内外边距

综合代码演示

CSS 美化三剑客：圆角边框、盒子阴影与文字阴影

1. 圆角边框（border-radius）：告别生硬直角

核心语法：圆角的本质

实战案例：从矩形到圆形

实用技巧

2. 盒子阴影（box-shadow）：给元素添加立体感

语法解析

实战案例：交互增强效果

注意事项

3. 文字阴影（text-shadow）：让文字更有质感

语法解析

实战案例：突出标题文字

创意用法

4. 综合实战：打造精致卡片组件

综合代码演示

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具