✊不积跬步，无以至千里；不积小流，无以成江海
外边距折叠的几种案例
外边距折叠是指当相邻的两个元素具有垂直方向上的外边距时，它们的外边距会发生合并（折叠）的现象。外边距折叠只会在普通流中的块级元素中发生，以下是几种常见的外边距折叠案例：
- 兄弟元素的上下外边距折叠
当相邻的两个兄弟元素没有边框、内边距、行内内容、浮动等分隔时，它们的上下外边距会发生折叠。
xml
<style>
.box {
margin: 20px 0;
background-color: gray;
}
</style>
<div class="box"></div>
<div class="box"></div>在这个例子中，两个相邻的 .box 元素之间的上下外边距会发生折叠，结果是它们之间的垂直间距实际上只有 20px。
- 父元素和第一个/最后一个子元素的外边距折叠
当父元素没有边框、内边距、行内内容、浮动等分隔，并且第一个或最后一个子元素也没有边框、内边距、行内内容、浮动等分隔时，父元素的上下外边距会与第一个或最后一个子元素的上下外边距折叠。
xml
<style>
.parent {
margin: 20px 0;
background-color: gray;
}
.child {
margin: 10px 0;
background-color: lightgray;
}
</style>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>在这个例子中，.parent 元素的上下外边距会与第一个子元素 .child 的上外边距折叠，以及与最后一个子元素 .child 的下外边距折叠，结果是整体的垂直间距实际上只有 20px。 3. 空元素的上下外边距折叠
当一个元素没有边框、内边距、行内内容、浮动等分隔时，它的上下外边距会发生折叠，即使没有相邻的元素。
html
xml
<style>
.box {
margin: 30px 0;
background-color: gray;
}
</style>
<div class="box"></div>在这个例子中，.box 元素的上下外边距会发生折叠，结果是元素上方和下方的垂直间距实际上只有 30px。
外边距折叠是 CSS 盒模型的一种规则，可以在某些情况下简化布局，但也可能导致意外的间距效果。如果需要避免外边距折叠，可以使用一些方法，如设置边框、内边距、浮动或使用定位等。
CSS3背景、渐变、阴影等用法
CSS3 提供了丰富的功能来创建背景、渐变和阴影效果。以下是一些常见的用法：
-
背景（Background）
使用
background属性可以设置元素的背景样式。常用的属性包括：background-color：设置背景颜色。background-image：设置背景图像。background-repeat：设置背景图像的重复方式。background-position：设置背景图像的位置。background-size：设置背景图像的尺寸。
-
渐变（Gradient）
使用 CSS 渐变可以创建平滑的过渡效果。常用的渐变类型有：
- 线性渐变（Linear Gradient）：在两个或多个颜色之间创建线性过渡。
- 径向渐变（Radial Gradient）：从一个中心点向外辐射状地创建颜色过渡。
- 渐变色停止（Gradient Color Stops）：指定渐变中的颜色和位置。
渐变可以通过 background-image 属性结合 linear-gradient() 或 radial-gradient() 函数来实现。
-
阴影（Box Shadow）
使用
box-shadow属性可以创建元素的阴影效果。该属性接受一组参数来定义阴影的样式，包括：- 阴影颜色（color）
- 水平偏移量（horizontal offset）
- 垂直偏移量（vertical offset）
- 模糊半径（blur radius）
- 扩展半径（spread radius）
阴影可以通过将
box-shadow应用于元素来实现，例如：
css
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}