透過即時預覽調整 iOS 陰影屬性與 Android elevation，並複製可用的 StyleSheet。
依據陰影顏色、位移、透明度、模糊半徑與 elevation 產生 React Native 卡片陰影設定，並提供即時預覽。
同時輸出 iOS 的 `shadowColor`、`shadowOffset`、`shadowOpacity`、`shadowRadius`。
同步提供 Android `elevation`，讓跨平台陰影設定可以一起調整。
右側會用 CSS 盒陰影模擬卡片效果，方便先做視覺比對。
柔和卡片
shadowColor=#0f172a, x=0, y=10, opacity=0.20, radius=16, elevation=12
淺層陰影
shadowColor=#111827, x=0, y=4, opacity=0.15, radius=8, elevation=4
大圓角卡片
borderRadius=16, cardColor=#ffffff, background=#e2e8f0
iOS 片段
shadowColor: '#0f172a',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.20,
shadowRadius: 16.0,Android 片段
elevation: 12,
完整 StyleSheet
const styles = StyleSheet.create({
card: {
backgroundColor: '#ffffff',
borderRadius: 16,
shadowColor: '#0f172a',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.20,
shadowRadius: 16.0,
elevation: 12,
},
});只調整 iOS 陰影，忘了同步 Android elevation
兩邊一起看，避免 iOS 與 Android 層級感落差太大。
透明度太低或半徑太小，陰影幾乎不可見
同時增加 `shadowOpacity` 與 `shadowRadius`，再看預覽卡片是否足夠。
直接把網頁預覽效果等同於真機效果
CSS 預覽只供快速比對，正式值仍要在真機上微調。
React Native 陰影產生器適合快速找出跨平台基準值；要達到最終視覺一致，仍需在真機上做最後微調。
為什麼右側預覽和手機上看起來不完全一樣？
因為右側使用 CSS 盒陰影近似模擬，實際效果仍受平台渲染差異影響。
可以直接複製到 React Native 專案嗎？
可以，輸出就是 `StyleSheet.create()` 片段；你只需要貼回元件樣式即可。
陰影顏色一定要跟卡片文字顏色一致嗎？
不一定，通常會使用較深且低透明度的中性色，避免陰影帶入過多彩色偏移。