在创建圣诞树装饰球时，我们可以通过 CSS 的`border-radius`属性来实现完美的圆形。
`border-radius`属性允许我们设置元素的圆角边框，当所有四个值都被设置为相同的百分比
时，它可以将一个元素的形状变为完美的圆形。此外，我们还可以利用 CSS 的`z-index`属性
来控制装饰球的堆叠顺序，这对于创建具有层次感的圣诞树装饰至关重要。
### 使用`border-radius`创建圆形装饰球
首先，我们为装饰球设置基本的样式，包括大小和颜色。然后，我们使用`border-radius`属
性将装饰球变为圆形。
```css
.ornament {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%; /* 创建完美的圆形 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
在这段 CSS 中，`border-radius: 50%;`确保了装饰球是一个完美的圆形。`width`和`height`属性
设置了装饰球的大小，而`background-color`属性定义了颜色。
### 使用`z-index`属性堆叠装饰球
为了在圣诞树上堆叠多个装饰球，我们需要控制它们的层叠顺序。`z-index`属性允许我们指
定元素在 Z 轴上的顺序，从而创建出层次感。
```css
.ornament {
/* 其他样式 */
z-index: 1; /* 设置 z-index 值 */
}
.ornament:nth-child(2) {
z-index: 2; /* 后面的装饰球可以设置更高的 z-index 值 */
}
.ornament:nth-child(3) {
z-index: 3; /* 更高 */
}
资源评论
