今天練習 SCSS,遇到一個滿有趣的裝飾效果,在這邊記錄一下。

.scene .mountain .snow::after {
content: "";
position: absolute;
top: 99px;
left: -80px;
width: 160px;
height: 15px;
background-image: radial-gradient(
circle at 10px 15px,
#3fae4a 12px,
transparent 13px
);
background-repeat: repeat;
background-size: 20px 20px;
transform: rotateX(180deg);
}
2026 年後記
原文只有效果與程式碼截圖。整理時把截圖中的 SCSS 轉成可複製的程式碼;用 radial-gradient() 搭配偽元素製作重複圖案的方式仍然可用。