---
title: "Discussion on \"#64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作\" | Hashnode"
description: "Discussion on \"#64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作\". ⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。\n\n\n今天我們要來製作一個捲動提示陰影效果：在捲動框的最頂端、最尾端沒有陰影，但是在捲動時有淡淡的陰影出現，提示使用者上面、下面還有內容。\n\n\nDEMO: Scrolling Shadows with CSS isolation\n\n\n一、原理\n\n原理很簡單，其實是個障眼法…"
url: "https://hashnode.com/posts/css-scrolling-shadows/689c7b0c89fa656485676bf1"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [#64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作](https://im1010ioio.hashnode.dev/css-scrolling-shadows?utm_source=hashnode&utm_medium=feed)

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。 今天我們要來製作一個捲動提示陰影效果：在捲動框的最頂端、最尾端沒有陰影，但是在捲動時有淡淡的陰影出現，提示使用者上面、下面還有內容。 DEMO: Scrolling Shadows with CSS isolation 一、原理 原理很簡單，其實是個障眼法…

Aug 13, 2025 · 1 min read · im1010ioio.hashnode.dev  
Updated Feb 4  
Read the article

-   [#scroll-shadows](https://hashnode.com/tag/scroll-shadows)
-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#isolation](https://hashnode.com/tag/isolation)
-   [#css-isolation](https://hashnode.com/tag/css-isolation)

## Written by

[YI-LIN CHEN (Eva)](https://hashnode.com/@im1010ioio)

@im1010ioio · Taipei, Taiwan

  
[View profile](https://hashnode.com/@im1010ioio)

ғʀᴏɴᴛᴇɴᴅ ᴅᴇᴠᴇʟᴏᴘᴇʀ / ᴅᴇsɪɢɴᴇʀ / ᴄʀᴇᴀᴛᴏʀ

Chief Designer @HealthyPlate

## Responses

Markdown supported · ⌘↵ to post

No responses yet.