跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端java

CSS 盒子模型详解：边框、内边距与外边距

详细解析了 CSS 盒子模型的核心概念，包括内容区、内边距、边框和外边距的定义及其对元素尺寸的影响。通过实例代码演示了边框样式设置、水平居中布局、外边距合并问题（塌陷）的解决方案。此外，还介绍了圆角边框、盒子阴影和文字阴影等美化属性，帮助开发者构建更精致的页面组件。

颠三倒四发布于 2026/4/6更新于 2026/7/2349 浏览
CSS 盒子模型详解：边框、内边距与外边距

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; /* 再单独设置上边框为红色 */
}
边框对盒子大小的影响

重要提示：边框会增加盒子的实际大小。例如，一个宽度为 100px 的盒子，如果设置了 5px 的边框，其实际宽度将变为 110px（100 + 5×2）。

解决方案：

  1. 测量盒子时不包含边框
  2. 如果测量包含边框，需从 width/height 中减去边框宽度的两倍
表格细线边框

表格边框默认会有重叠问题，使用 border-collapse: collapse 可以合并相邻边框：

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

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

内边距用于控制内容区与边框之间的距离，让内容不会紧贴边框。

内边距的基本用法

内边距有四个方向的属性：

  • padding-top：上内边距
  • padding-right：右内边距
  • padding-bottom：下内边距
  • padding-left：左内边距

也可以使用简写形式，规则如下：

.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;
}
内边距对盒子大小的影响

与边框类似，指定了宽高的盒子设置内边距会使盒子变大。例如，一个 200×200px 的盒子，设置 10px 内边距后，实际大小会变为 220×220px。

解决方案：如果需要保持盒子总大小不变，应从 width/height 中减去内边距的总和。

内边距的实用技巧

当导航栏中每个菜单项的字数不同时，使用内边距代替固定宽度可以实现更灵活的布局：

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

这种方式能保证每个菜单项的内容与边缘距离一致，且能自适应内容长度。

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

如果盒子没有指定 width/height 属性，设置内边距不会撑开盒子大小：

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

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

外边距控制盒子与其他盒子之间的距离，其语法与内边距类似。

外边距的基本用法

外边距同样有四个方向的属性：

  • margin-top：上外边距
  • margin-right：右外边距
  • margin-bottom：下外边距
  • margin-left：左外边距

简写规则与 padding 完全一致，这里不再赘述。

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

外边距最常用的技巧之一是实现块级元素的水平居中，需要满足两个条件：

  1. 盒子必须指定宽度（width）
  2. 左右外边距都设置为 auto
.header {
  width: 500px;
  height: 200px;
  background-color: skyblue;
  margin: 100px auto; /* 上下 100px，左右自动居中 */
}

对于行内元素或行内块元素，水平居中需要给其父元素设置 text-align: center。

外边距合并问题

使用 margin 定义垂直方向的外边距时，可能会出现外边距合并的现象。当父元素没有设置'阻隔'（如边框、内边距、overflow 等）时，父元素的 margin-top 会与子元素的 margin-top 合并，表现为：

  • 父元素会'吸收'子元素的上外边距，两者的外边距合并为一个（取较大值）。
  • 视觉上，子元素的上外边距'转移'到了父元素身上，导致父元素跟着子元素一起向下移动（看起来像'塌陷'）。

例如：

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

显示效果【本来子元素按照 margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了 (塌陷)】：

在这里插入图片描述

解决方法：

  1. 为父元素定义上边框（可设为透明）border: 1px solid transparent;
  2. 为父元素定义上内边距 padding: 1px;
  3. 为父元素添加 overflow: hidden（推荐，不改变盒子大小）
#father {
  /* 其他样式不变 */
  overflow: hidden; /* 解决外边距塌陷 */
}

显示效果：

在这里插入图片描述

清除默认内外边距

网页中很多元素（如 ul、p 等）会自带默认的内外边距，且不同浏览器表现不一致。因此，布局前通常会先清除这些默认样式：

* {
  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>
  <!-- 页面布局三大核心：盒子模型、浮动、定位 -->
  <!-- 谓盒子模型：就是把 HTML 页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容 -->
  <style>
    /* 注意，这句话应为我们使用 CSS 时的第一句话 */
    * { 
      padding: 0; /* 清除内边距 */
      margin: 0; /* 清除外边距 */
    }
    
    /* 1.border */
    /* border 可以设置元素的边框，边框由三部分组成：边框宽度 (粗细)、边框样式、边框颜色 */
    /* border: border-width | border-style | border-color; */
    /* 边框属性简写 (复合写法)：border-width border-style border-color;(没有顺序要求) */
    #div1 {
      width: 300px;
      height: 200px;
      /* 1.border-width 边框的粗细，一般情况下都用 px */
      border-width: 10px;
      /* 2.border-style 边框的样式 solid(实现边框) dashed(虚线边框) dotted(点线边框) */
      border-style: solid;
      /* 3.border-color */
      border-color: pink;
      /* 4.边框的简写 */
      /* border: 10px solid pink; */
    }
    
    /* 5.边框分开写法： border-top/left/right/bottom: 5px solid red */
    /* 注意：11.边框会额外增加盒子的实际大小，比如 width:100px 的盒子，若有 border: 5px solid red，则盒子的实际宽度为 100+2*5 */
    /* 解决方案：1. 测量盒子的时候不要量边框 2. 如果测量的时候包含了边框，则需要 width/height 减去边框宽度*2(若两边都有边框) */
    #div2 {
      width: 200px;
      height: 200px;
      /* 给定一个 200*200 的盒子，设置上边框为红色，其余边为蓝色 */
      /* border-top: 5px solid red; border-bottom: 5px solid blue; border-left: 5px solid blue; border-right: 5px solid blue; */
      /* 这种写法更好，合理运用层叠性 (就近原则) */
      border: 5px solid blue;
      border-top: 5px solid red;
    }
    
    /* 6.表格细线边框 (边框与边框之间会有像素融合问题，5px+5px=10px) */
    /* 解决：border-collapse: collapse(合并) 相邻边框合并在一起 */
    table {
      width: 500px;
      height: 250px;
      text-align: center;
    }
    table, td, th {
      border: 1px solid pink; /* 合并相邻的边框 */
      border-collapse: collapse;
    }
    
    /* 7.内边距 padding 盒子里面的内容默认适合盒子的边缘紧挨着的，这时就需要 padding 来进行调节 */
    /* 11.padding 属性用于设置内边距，即边框和内容之间的距离 */
    /* 1.padding-left 左内边距 2.padding-right 右内边距 3.padding-top 上内边距 4.padding-bottom 下内边距 */
    /* 22.padding 复合写法 (简写) */
    /* 1.padding: 5px; 1 个值，代表上下左右都有 5 像素内边距 */
    /* 2.padding: 5px 10px; 2 个值，代表上下内边是 5 像素，左右内边距是 10 像素 */
    /* 3.padding: 5px 10px 20px; 3 个值，代表上内边距是 5 像素，左右内边距是 10 像素，下内边距是 20 像素 */
    /* 4.padding: 5px 10px 20px 30px; 4 个值，上是 5 像素，右 10 像素，下 20 像素，左 30 像素 顺时针 (上右下左) */
    /* 33.padding 会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子 */
    /* 解决方案：如果要保证盒子跟效果图大小一致，则让 width/height 减去多出来的内边距大小即可 (注意两边的内边距都要考虑进去) */
    .div3 {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 在浏览器右键点击检查，把鼠标移动到对应的位置，内边距部分会变为跟背景不一样的颜色 */
      /* padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; */
      /* 内边距简写 */
      /* padding: 5px; */
      /* padding: 5px 10px; */
      /* padding: 5px 10px 20px; */
      padding: 5px 10px 20px 30px;
    }
    
    /* 7.1 内边距的应用：当网页中每个导航栏 (盒子) 里面的字数不一样多时，我们就不要统一给每一个盒子设定宽度了 */
    /* 直接用 padding 撑开盒子，就可以实现即使内容长度不一样，内容与盒子之间的边距也一样 */
    #nav {
      height: 41px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
      background-color: #fcfcfc;
      /* 运用了继承 a 继承来自 div 的行高 */
      line-height: 41px;
    }
    #nav a {
      /* height: 41px; 由于 a 属于行内元素，这样设置无效，此时必须要转换 */
      /* 行内元素->行内块元素 (不能装换成块级元素，因为其无法一行显示多个) */
      display: inline-block;
      height: 41px;
      padding: 0 20px;
      font-size: 15px;
      color: #4c4c4c;
      text-decoration: none;
    }
    /* 伪类选择器 */
    #nav a:hover {
      background-color: #eee;
      color: #ff8500;
    }
    
    /* 7.2 padding 不会影响盒子大小的情况 */
    /* 如果盒子本身没有指定 width/height 属性，则此时 padding 就不会撑开盒子大小 (对应没有设置的属性) */
    /* 总结：孩子有边框，孩子变大了，但是父亲不受影响，也就是父盒子里面的子盒子会受内边框影响，但是父盒子不会发生变化 */
    .div5 {
      width: 300px;
      height: 100px;
      background-color: pink;
    }
    .div5 p {
      /* p 的 width 不会变成 300+30*2=360px，在自身 width 没有指定的情况下，不会超出父亲的范围 */
      /* width: 100%; */
      padding: 30px;
    }
    
    /* 8. 外边距 (margin) 控制盒子和盒子之间的距离 */
    /* 属性：1.margin-left 左外边距 2.margin-right 右外边距 3.margin-top 上外边距 4.margin-bottom 下外边距 */
    /* 注意：margin 简写方式代表的意义和 padding 完全一致 */
    .div6 {
      height: 200px;
      width: 100px;
      background-color: pink;
    }
    /* #one { margin-bottom: 20px; } */
    #two {
      margin-top: 20px;
      margin-left: 20px;
      margin-bottom: 50px;
    }
    
    /* 8.1 外边距的典型应用 */
    /* 外边距可以让块级盒子水平居中 (盒子默认左侧对齐)，但是必须满足两个条件： */
    /* 1.盒子必须指定了宽度 (width),否则它就跟浏览器/父盒子一样宽了 */
    /* 2.盒子左右的外边距都设置为 auto */
    /* 以下三种写法都可以： */
    /* 1.margin-left: auto; margin-right: auto; */
    /* 2.margin: auto; (上下左右都 auto 了) */
    /* 3.(常用)margin: 0px auto; (上下外边距为 0px 左右 auto) */
    /* 注意：以上方法是让块级元素居中，行内元素或者行内块元素水平居中给其 父元素 添加 text-align: center; 即可 */
    .header {
      width: 500px;
      height: 200px;
      background-color: skyblue;
      /* 简写法：上下外边距为 100px，左右外边距 auto 实现块级元素自动水平居中 */
      margin: 100px auto;
      /* text-align: center 使行内元素和行内块元素 (img) 都会居中对齐 */
      text-align: center;
    }
    #span1 {
      margin: 0 auto; /* margin: 0 auto; 不起效果，其只对块级元素起作用 */
      /* 给其父元素添加 text-align: center 才对 */
    }
    
    /* 8.2 使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并 */
    /* 嵌套块元素垂直外边距的塌陷 (父盒子跟者子盒子一起塌下来了)： */
    /* 对于两个嵌套关系 (父子关系) 的块级元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值 */
    /* 解决方案： */
    /* 1.可以为父元素定义上边框 */
    /* 2.可以为父元素定义上内边框 */
    /* 3.可以为父元素添加 overflow: hidden */
    #father {
      width: 400px;
      height: 400px;
      background-color: purple;
      margin-top: 50px;
      /* 父元素塌陷解决 */
      /* 1. transparent(透明) */
      /* border: 1px solid transparent; */
      /* 2. */
      /* padding: 1px; */
      /* 3. 最好，不会改变盒子的大小，上面两种都有影响 */
      overflow: hidden; /* 4.还有其他方法，比如 浮动、固定、绝对定位 这些的盒子不会有塌陷问题 */
    }
    #son {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 本来子元素按照 margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了 (塌陷) */
      margin-top: 100px;
    }
    
    /* 9. 内外边距的清除 */
    /* 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。 */
    /* 因此我们在布局前，要先清除网页元素的内外边距 */
    /* *{ padding: 0; 清除内边距 margin: 0; 清除外边距 } */
    /* ！注意： */
    /* 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距 (即使设置也不起效果)。但是转换为块级元素和行内元素就可以 */
    /* ！这句话也是我们 CSS 的第一行代码 ！*/
    * {
      padding: 0;
      margin: 0;
    }
    #span2 {
      background-color: pink;
      margin: 20px;
    }
  </style>
</head>
<body>
  <!-- 测试边框各属性 -->
  <div id="div1"></div><br/>
  <!-- 测试边框分开写法 -->
  <div id="div2"></div>
  <!-- 测试表格细线边框 -->
  <table align="center" border="1" cellpadding="0" cellspacing="0">
    <thead>
      <!--注意不要把<thead>和<th>搞混 前一个是表结构标签，使表格层次看着更清晰，而后者是类似加粗版的<td>-->
      <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>进入搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="picture/down.jpeg"/></td>
        <td>345</td>
        <td>123</td>
        <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td><img src="picture/down.jpeg"/></td>
        <td>124</td>
        <td>123421</td>
        <td><a href="#" target="_blank">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>3</td>
        <td>西游记</td>
        <td><img src="picture/up.jpeg"/></td>
        <td>212</td>
        <td>3213</td>
        <td><a href="#" target="_blank">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
      <tr>
        <td>4</td>
        <td>甄嬛传</td>
        <td><img src="picture/up.jpeg"/></td>
        <td>2343</td>
        <td>243343</td>
        <td><a href="#" target="_blank">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
      </tr>
    </tbody>
  </table>
  <!-- 盒子模型内边距测试 -->
  <div class="div3">这是盒子模型的内边距测试 天王盖地虎，宝塔镇河妖妖怪阿斯蒂芬哈喽</div>
  <!-- 内边距的应用 -->
  <div id="nav"><a href="">新浪微博</a><a href="">手机新浪网</a><a href="">移动客户端</a><a href="">微博</a><a href="">交友网</a></div>
  <!-- 测试 padding 不会影响盒子大小的情况 -->
  <div class="div5"><p></p></div> 换行 <br/>
  <!-- 测试盒子模型之外边距 -->
  <div class="div6" id="one"></div>
  <div class="div6" id="two"></div>
  <!-- 外边距的应用 -->
  <div class="header"><span id="span1">里面的文字，为行内元素</span><img src="picture/up.jpeg"/></div>
  <br/>
  <!-- 外边距的合并 -->
  <div id="father"><div id="son"></div></div>
  <br/>
  <!-- 内外边距的清除 -->
  <!-- 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。 因此我们在布局前，要先清除网页元素的内外边距 -->
  12345 <ul><li> 你好 </li></ul>
  <span id="span2">行内元素尽量只设置左右的内外边距</span>
</body>
</html>

显示效果：

在这里插入图片描述

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

在网页设计中，细节决定品质。圆角边框、盒子阴影和文字阴影这三个 CSS 属性，虽然看似简单，却能瞬间提升页面的精致度和立体感。

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

默认情况下，HTML 元素的边框都是直角的，显得生硬刻板。border-radius 属性通过设置"圆角半径"，能让元素边缘呈现平滑的弧形效果，是现代 UI 设计的基础。

核心语法：圆角的本质

圆角效果的原理是在元素的每个角落绘制一个圆形（或椭圆），圆形与边框的交集形成弧形边缘。border-radius 的值就是这个圆形的半径，值越大，圆角越明显。

/* 基础语法 */
selector {
  border-radius: length; /* 可以是 px、%等单位 */
}
实战案例：从矩形到圆形

圆形效果
当元素是正方形时，将 border-radius 设置为宽度的 50%，即可得到完美圆形：

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

在这里插入图片描述

圆角矩形
对于长方形，将 border-radius 设置为高度的一半，可得到两侧半圆的胶囊形：

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

在这里插入图片描述

自定义不规则圆角
border-radius 支持为四个角分别设置不同半径，顺序为左上角→右上角→右下角→左下角（顺时针）：

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

在这里插入图片描述

实用技巧
  • 单位选择：px 适合固定尺寸的圆角，% 适合响应式设计（随元素大小自动调整）
  • 兼容处理：现代浏览器均支持，但老旧浏览器（如 IE8 及以下）不支持，需谨慎使用
  • 常见场景：按钮、头像、卡片组件、输入框等需要柔和边缘的元素

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

现实世界中，物体总会因为光线产生阴影，box-shadow 属性正是通过模拟这种光影效果，让平面的元素产生立体感。

语法解析
selector {
  box-shadow: h-shadow v-shadow blur spread color inset;
}

各参数含义：

  • h-shadow：必需，水平阴影位置（正值向右，负值向左）
  • v-shadow：必需，垂直阴影位置（正值向下，负值向上）
  • blur：可选，模糊距离（值越大，阴影越模糊）
  • spread：可选，阴影尺寸（正值扩大阴影，负值缩小）
  • color：可选，阴影颜色（常用 rgba 设置半透明）
  • inset：可选，将外阴影改为内阴影（默认是外阴影，不可写 outset）
实战案例：交互增强效果

hover 交互阴影
鼠标悬浮时显示阴影，提升交互体验：

.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);
}

在这里插入图片描述

注意事项
  • 阴影不占用空间：不会影响其他元素的布局，也不会撑开父容器
  • 多重阴影：用逗号分隔可添加多个阴影，实现复杂效果
  • 性能考量：过多或过大的阴影可能影响页面渲染性能，需适度使用

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

文字作为页面的核心内容，适当的阴影能增强可读性和视觉冲击力。text-shadow 的用法与 box-shadow 类似，但作用对象是文字。

语法解析
selector {
  text-shadow: h-shadow v-shadow blur color;
}

参数与盒子阴影基本一致，只是没有 spread（阴影尺寸）和 inset（内阴影）属性。

实战案例：突出标题文字
#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;
}

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

将三个属性结合使用，能快速提升组件质感。例如一个产品卡片：

.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>
    /* 111.圆角边框 */
    /* border-radius: length; 设置元素的外边框圆角 radius(圆的半径)，圆与边框的交集形成的圆角效果 */
    /* 参数值可以为 数值 或 百分比 的形式 */
    /* 1.如果盒子是个正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为 50% */
    /* 2.如果盒子是个矩形，设置为高度的一半就可以 */
    /* 3.该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 */
    /* 4.每个角分开写：border-top-left-radius、border-top-right-radius(top 必须在前面)、 border-bottom-right-radius、border-bottom-lef-radius(bottom 也要在前面) */
    
    /* 圆形 radiu 设置为盒子宽度的一半即可 */
    .yuanxing {
      width: 300px;
      height: 300px;
      background-color: pink;
      /* border-radius: 150px; */
      /* 50% 就是宽度和高度的一半 */
      border-radius: 50%;
    }
    
    /* 圆角矩形 radius 设置为盒子高度的一半 */
    .juxing {
      width: 300px;
      height: 100px;
      background-color: pink;
      border-radius: 50px;
    }
    
    /* 每个角设置不同的 radius */
    .radius1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* border-radius: 10px 20px 30px 40px; */
      /* border-radius: 10px 40px; */
      border-top-left-radius: 30px;
    }
    
    /* 222.盒子阴影 */
    /* 语法：box-shadow: h-shadow v-shadow blur spread color inset */
    /* h-shadow 必需。水平阴影的位置，允许负值 (数值越大，影子越往右边偏移) */
    /* v-shadow 必需。垂直阴影的位置，允许负值 (数值越大，影子越往下偏移) */
    /* blur 可选。模糊距离 (影子是虚的还是实的，数值越大，影子越模糊) */
    /* spread 可选。阴影的尺寸 */
    /* color 可选。阴影的颜色 */
    /* inset 可选。将外部阴影 (outset) 改为内部阴影 */
    /* 注意； */
    /* 1.默认是外阴影 (outset),但是不可以书写这个单词，否则将导致阴影无效 */
    /* 2.盒子阴影不占空间，不会影响其他盒子的排列位置 */
    .shadow1 {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      /* rgba 半透明化 */
      /* box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); */
    }
    .shadow1:hover {
      /* 原先盒子没有影子，当鼠标经过盒子时就添加阴影效果 */
      box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);
    }
    
    /* 文字阴影 */
    /* 语法：text-shadow: h-shadow v-shadow blur color; */
    /* h-shadow 必需。水平阴影的位置，允许负值 */
    /* v-shadow 必需。竖直阴影的位置，允许负值 */
    /* blur 可选。模糊的距离) */
    /* color 可选。模糊的颜 (数值越大阴影越虚) */
    #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>
  <p>分隔</p>
  <!-- 圆角矩形 --> 圆角矩形 <div class="juxing"></div>
  <p>分隔</p>
  <div class="radius1"></div>
  <p>分隔</p>
  <!-- 盒子阴影测试 -->
  <div class="shadow1"></div>
  <!-- 文字阴影测试 -->
  <div id="character">你是阴影，我是火影</div>
  <div class="glow-text">glow 测试</div>
  <div class="product-card"><h3>大夏境内，诸神禁行</h3></div>
</body>
</html>

显示效果：

在这里插入图片描述

目录

  1. CSS 盒子模型
  2. 1. 什么是 CSS 盒子模型？
  3. 2. 边框（border）：盒子的"外衣"
  4. 边框的基本属性
  5. 单边边框设置
  6. 边框对盒子大小的影响
  7. 表格细线边框
  8. 3. 内边距（padding）：内容与边框的缓冲带
  9. 内边距的基本用法
  10. 内边距对盒子大小的影响
  11. 内边距的实用技巧
  12. 内边距不影响盒子大小的特殊情况
  13. 4. 外边距（margin）：盒子之间的距离
  14. 外边距的基本用法
  15. 外边距的典型应用：水平居中
  16. 外边距合并问题
  17. 清除默认内外边距
  18. 综合代码演示
  19. CSS 美化三剑客：圆角边框、盒子阴影与文字阴影
  20. 1. 圆角边框（border-radius）：告别生硬直角
  21. 核心语法：圆角的本质
  22. 实战案例：从矩形到圆形
  23. 实用技巧
  24. 2. 盒子阴影（box-shadow）：给元素添加立体感
  25. 语法解析
  26. 实战案例：交互增强效果
  27. 注意事项
  28. 3. 文字阴影（text-shadow）：让文字更有质感
  29. 语法解析
  30. 实战案例：突出标题文字
  31. 创意用法
  32. 4. 综合实战：打造精致卡片组件
  33. 综合代码演示
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

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

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • 基于单片机的智能家居监控系统设计与实现
  • 企业级农产品直卖平台：SpringBoot+Vue+MyBatis 架构
  • 使用 jsr:@langchain/pyodide-sandbox 构建 Python 安全沙箱
  • Vue3 前端面试核心 20 题详解（含代码实战）
  • 大模型服务评测平台 AI Ping 功能与场景实测
  • GPT-4o mini 发布：多模态大模型技术解析与应用实践
  • 没有NVLink的多卡环境，vLLM部署Qwen-VL为何卡死？llama.cpp却跑通了
  • 使用 Rust 与 GLM-5 构建高性能 AI 翻译 CLI 工具
  • AI 辅助 FPGA 开发实践：Vivado 配置与智能编程
  • 小米 Miloco 分离式部署指南：环境搭建与模型对接
  • 飞凌 OK3588-C 适配 Rockchip Buildroot Linux 6.1 SSH 服务配置
  • BFS 解决 FloodFill 算法：从图像渲染到岛屿问题实战
  • AIGC 如何改变金融业？不是所有智能化问题都要用大模型解决
  • VR、具身智能与人形机器人：通往现实世界的智能接口
  • Trae 集成 Figma MCP 实现前端代码自动生成
  • Python 标准库与第三方库实战：日期处理、字符串操作及 Excel 应用
  • OpenTiny NEXT 前端智能化征文：系统学习 AI 前端与 WebAgent
  • Git 基础指令与本地仓库操作指南
  • Git 仓库迁移指南：从 CODING.net 至腾讯云 CNB
  • MySQL 索引原理：B+ 树结构与实战优化

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online