> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/drawing/shadow.md).

# shadow

[SwiftUI](/ios/swiftui.md) ⟩ [view](/ios/swiftui/view.md) ⟩ [drawing](/ios/swiftui/view/drawing.md) ⟩ shadow

{% hint style="info" %}
:star: 注意： `.shadow()` 有三個：

* <mark style="color:blue;">`view.shadow()`</mark>：爲 view 加<mark style="color:yellow;">陰影</mark>
* <mark style="color:blue;">`ShapeStyle.shadow()`</mark> <mark style="color:orange;">(static)</mark>：爲 <mark style="color:orange;">current style</mark> 加<mark style="color:yellow;">陰影</mark>
* <mark style="color:blue;">`style.shadow()`</mark>：爲 <mark style="color:blue;">`ShapeStyle`</mark> <mark style="color:orange;">instance</mark> 加<mark style="color:yellow;">陰影</mark>
  {% endhint %}

{% hint style="warning" %}
加陰影時，可用 [`.blendMode()`](https://developer.apple.com/documentation/swiftui/view/blendmode\(_:\)) 來避免陰影擋住前景。
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* [view.shadow()](/ios/swiftui/view/drawing/shadow/view.shadow.md)：爲 view 加<mark style="color:yellow;">陰影</mark>
* [ShadowStyle](/ios/swiftui/view/drawing/shadow/shadowstyle.md)：<mark style="color:yellow;">陰影樣式</mark>
* [ShapeStyle](/ios/swiftui/shapes/shapestyle.md)：
  * <mark style="color:orange;">type method</mark> [.shadow()](https://developer.apple.com/documentation/swiftui/shapestyle/shadow\(_:\)-swift.type.method) ：爲 <mark style="color:orange;">current style</mark> 加<mark style="color:yellow;">陰影</mark>
  * <mark style="color:orange;">instance method</mark> [.shadow()](https://developer.apple.com/documentation/swiftui/shapestyle/shadow\(_:\)-swift.method) ：爲 [ShapeStyle](/ios/swiftui/shapes/shapestyle.md) 的 <mark style="color:orange;">instance</mark> 加<mark style="color:yellow;">陰影</mark>
* [blend mode](/ios/swiftui/view/drawing/blend-mode.md)
  {% endtab %}

{% tab title="💾 程式" %}

```swift
// ⭐️ shape.fill(shapeStyle_withShadow)
Circle()
    // 藍色＋陰影       ╭──ShadowStyle───╮
    .fill(.blue.shadow(.drop(radius: 10)))    // .blue calls its instance method .shadow()
```

{% endtab %}

{% tab title="👥 相關" %}

* [blend mode](/ios/swiftui/view/drawing/blend-mode.md)：畫<mark style="color:yellow;">內陰影</mark>時，有時要用 [`.blendMode()`](https://developer.apple.com/documentation/swiftui/view/blendmode\(_:\)) 填充色才不會蓋著前景。
* 如果要幫整個 [container view](/ios/swiftui/view/hierarchy/container.md) 加陰影，需用到 [`.compositingGroup()`](/ios/swiftui/view/drawing/bian-wei-tong-tu-ceng.md)。
  {% endtab %}

{% tab title="⬇️ 應用" %}

* [Swatch](/ios/custom/view/swatch.md)：色卡有<mark style="color:yellow;">內陰影</mark>設計
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [View](https://developer.apple.com/documentation/swiftui/view) ⟩&#x20;
    * [shadow(color:radius:x:y:)](https://developer.apple.com/documentation/swiftui/view/shadow\(color:radius:x:y:\))
    * [.blendMode(\_:)](https://developer.apple.com/documentation/swiftui/view/blendmode\(_:\))
  * [ShapeStyle](https://developer.apple.com/documentation/swiftui/shapestyle) ⟩&#x20;
    * [.shadow(\_:)](https://developer.apple.com/documentation/swiftui/shapestyle/shadow\(_:\)-swift.type.method) (<mark style="color:orange;">type method</mark>)
    * [.shadow(\_:)](https://developer.apple.com/documentation/swiftui/shapestyle/shadow\(_:\)-swift.method) (<mark style="color:orange;">instance method</mark>)
  * [Drawing and graphics](https://developer.apple.com/documentation/swiftui/drawing-and-graphics) ⟩ [ShadowStyle](https://developer.apple.com/documentation/swiftui/shadowstyle) ⟩&#x20;
    * [.inner(color:radius:x:y:)](https://developer.apple.com/documentation/swiftui/shadowstyle/inner\(color:radius:x:y:\)) ：custom inner shadow style.
      {% endtab %}

{% tab title="📗 參考" %}

* [ ] ChaoCode ⟩ [在 SwiftUI 中替 View 加上陰影](https://chaocode.co/blog/shadow-in-swiftui)&#x20;
  {% endtab %}
  {% endtabs %}