跳到主要內容
前端開發

用 radial-gradient 偽元素畫出雪山裝飾

記錄練習 SCSS 時,用偽元素與 radial-gradient 製作裝飾圖案的寫法。

W

今天練習 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() 搭配偽元素製作重複圖案的方式仍然可用。

分享這篇