CSS盒子模型、圆角边框、盒子阴影效果实现

table {
    border-collapse: collapse; /* 合并相邻单元格边框 */
}

关键要点：边框会影响盒子的实际尺寸。因为边框宽度会额外占用空间。因此，在设计中需采用以下策略之一：测量盒子尺寸时不包含边框；或在定义width/height时手动减去边框宽度。

CSS内边距使用指南

内边距是内容与边框之间的缓冲区，用于控制内部间距。

需注意，内边距同样会撑大盒子的实际大小。为确保最终效果符合设计稿，在计算width与height时，应将内边距尺寸纳入考量。

然而存在一个例外：如果盒子未明确指定width或height属性，则对应方向的padding不会导致盒子被撑大。例如，一个未设定宽度的块级元素，增加其左右内边距，其宽度会自动适应，不会被撑破。

CSS外边距应用与问题处理

如果说padding调节盒内空间，那么margin则调控盒子间的外部间距。

外边距的一个经典应用是实现块级元素水平居中。这需要满足两个条件：元素必须定义宽度；将其左右外边距设置为auto。

对于行内元素或行内块元素，水平居中则更简单，只需在其父元素上设置text-align: center;即可。

使用外边距时需警惕外边距合并现象，主要有两种情形：

1. 相邻块级元素垂直外边距合并：当上下两个块级元素相邻时，它们之间的垂直距离将是两者外边距中的较大值，而非两者之和。
2. 嵌套块级元素垂直外边距塌陷：在父子关系的块级元素中，若父元素和子元素均有上边距，则父元素的上边距会“塌陷”为两者中的较大值，导致父子元素顶部粘连。

解决外边距塌陷的常用方法包括：为父元素添加一个上边框、添加上内边距，或使用最流行的方案——为父元素设置overflow: hidden。

清除默认内外边距

需注意，许多HTML元素自带浏览器默认的内外边距，且不同浏览器的默认值可能不同。因此，在开始页面布局前，通常会进行全局样式重置：

* {
    margin: 0;     /* 清除所有元素默认外边距 */
    padding: 0;    /* 清除所有元素默认内边距 */
}

另外，针对行内元素，出于浏览器兼容性考虑，通常建议仅设置其左右内外边距，避免设置上下边距。当然，若将其显示类型转换为块级或行内块元素，则可不受此限制。

实现圆角边框效果

想让元素边角变得圆润？border-radius属性可以轻松创建圆角效果。

其基本语法如下：

border-radius: length; /* 值可为具体数值或百分比，值越大圆角越明显 */

其原理是用一个椭圆弧度来修整盒子的四个角，切割方式如图所示：

实际应用中常见以下几种写法：

1. 制作圆形：若元素是正方形，将border-radius的值设置为元素宽高的一半（或50%），即可得到一个完美的圆。
2. 制作圆角矩形：将border-radius值设置为元素高度的一半，便可得到常见的胶囊状按钮。
3. 简写与单独设置：border-radius是复合属性。当提供四个值时，顺序依次代表：左上角、右上角、右下角和左下角（顺时针）。如需单独设置某个角，可使用border-top-left-radius、border-bottom-right-radius等属性。

为盒子添加阴影效果

阴影是提升元素立体感和层次感的有力工具。box-shadow属性可为盒子添加阴影。

该属性语法包含多个参数：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，blur参数控制阴影的模糊程度，值越大阴影边缘越虚化。默认是外阴影，添加inset关键字可将其设为内阴影。

为文字添加阴影效果

除了盒子，文字也可以通过text-shadow属性添加阴影以增强视觉效果。

其语法与盒子阴影相似：

text-shadow: h-shadow v-shadow blur color;

无论是盒子阴影还是文字阴影，恰当使用都能有效提升页面的设计感和视觉层次。