你每天都會用到的開發者工具,全都集中在同一個地方。

轉換器、格式化工具、雜湊、驗證器,以及那些你總是一再重開的小工具,都留在一起,不再散落在各個分頁裡。

GitHub
/ 工具
/ 工具搜尋
109 款工具
/ Box Shadow 產生器
陰影 1
陰影 2
/ 選定的工具

Box Shadow 產生器 - 免費 產生器 工具

視覺化 CSS box-shadow 產生器,支援多重陰影

01

甚麼是 CSS Box Shadow?

CSS box-shadow 屬性會在元素框架周圍加上陰影效果。你可以設定以逗號分隔的多重陰影。每個陰影由水平與垂直偏移、模糊與擴散半徑、顏色,以及…描述。

02

運作原理是甚麼?

Box shadow 由數個值定義:水平偏移(正值向右移)、垂直偏移(正值向下移)、模糊半徑(越大越模糊)、擴散半徑(正值擴大、負值縮小),以及顏…

03

範例情境

涵蓋微妙陰影、中等浮凸與內陰影,讓你能快速比較常見的輸入與輸出。

/ 相關工具
/ 程式碼

選定工具的原始碼,與右側的即時版本並列顯示。

/ 原始碼
TypeScript
typescript
// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;
Buidl Now 圖示

把所有實用工具集中在一處,讓你專注在開發流程中。

挑一個工具、完成檢查、複製你需要的內容,然後回到真正的產品工作上。

為講求快速交付的建構者打造的開發者工具。© 2026 Buidl Now. 保留所有權利。