「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

春节到，送个大家一个桃子🍑，至于说为什么是青涩的呢，那就是希望大家都有年轻时的精力与快乐，青春无限，活力无限。

青涩桃子

我们用一个div元素就可以实现它了，不过在实现过程中也碰到一些问题，在后面我会一一道来。青涩桃子有两部分组成：桃子和叶子。

桃子

计划中的桃子宽高是：1：1，因为是青涩🍑，所有要给个渐变，代码实现如下：

.peach {
    --w: 10rem;
    width: var(--w);
    height: var(--w);
    background-image: linear-gradient(to right top, #8fa688 25%, #ed3e40);
    border-radius: 50% 0% 50% 70%;
    transform: rotate(-45deg);
    box-shadow: 0 0 10px 0 #fff inset, -5px 5px 10px #b9a7a7;
    position: relative;
}

叶子

叶子是使用两个伪元素实现的，叶子的宽是桃子的一半，叶子的宽高比设为：2：1，代码实现如下：

.peach::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 25%;
    background-color: #77bb70;
    border-radius: 50%;
    bottom: 10%;
    left: -5%;
    z-index: -1;
    transform-origin: 100% center;
    box-shadow: 0 var(--b) calc(var(--w) * 0.025) #646363;
}
.peach::before {
    --b: calc(var(--w) * 0.025);
    transform: translate(-50%) rotate(30deg);
}
.peach::after {
    --b: calc(var(--w) * -0.025);
    transform: translate(-50%) rotate(-120deg);
}

此时我们可以看到使用了z-index: -1后，伪元素形成的图层会在桃子的下面，如下：

🤫需要我们注意的地方来了，如果div，也就是伪元素赋予层，使用 transform 或者 opacity，伪元素的z-index: -1对赋予层是不起作用的，但不影响两个伪元素之间的层级比较。

注意

话接上文，如果div使用transform 或者 opacity后，其伪元素的z-index将不起作用，比如给桃子🍑一个旋转，就会变成如下情况：

总结

元素设置transform或opacity属性时会创建一个新的stacking context，译作层叠上下文的一个区域。此时，层叠规则会发生变化，新的区域会在最底层，这种情况只对子元素有影响，但对兄弟元素是没有影响的。

如果想要一个方正的桃子（如封面图），我们需要给当前元素在包裹一层，然后对它自行旋转变换。