const{Fragment:l,jsx:n,jsxs:e}=arguments[0];function _createMdxContent(r){const c={a:"a",annotation:"annotation",blockquote:"blockquote",code:"code",figure:"figure",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",math:"math",mi:"mi",mo:"mo",mrow:"mrow",ol:"ol",p:"p",pre:"pre",semantics:"semantics",span:"span",strong:"strong",ul:"ul",...r.components},{CodePen:s}=c;return s||function(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodePen",!0),e(l,{children:[e(c.p,{children:["在網頁設計中，我們偶爾會遇到需要實現",n(c.strong,{children:"內凹圓角"}),"的特殊設計，例如像「手機瀏海」或票券上的缺口。傳統上，雖然可以嘗試使用圖層",n(c.strong,{children:"拼接"})," (Splicing) 搭配 ",n(c.code,{children:"background"})," 達成，但若背景複雜或顏色不固定，拼接處的非透明區域 (non-transparent area) 會因無法與底色融合而輕易被使用者察覺，導致效果破綻。"]}),"\n",n(c.p,{children:"為了解決透明度的問題，我們能使用CSS Mask來實現。透過Masking的方式，我們能精準地控制元素的哪些區域應該是完全透明 (Transparent) 的，藉此實現複雜的鏤空效果。"}),"\n",n(c.p,{children:'CSS mask的原理，是將多個"遮罩層"結果進行交集，並組合成最終能顯示的元素。'}),"\n",n(c.p,{children:"保留部分: Mask圖層的不透明區域會保留元素 (#000/alpha=1)\n挖空部分: Mask圖層的透明區域會被挖空(transparent/alpha=0)\n多層交集: 透過多的mask來處理，並使用交集來達成最終的顯示結果，並且只有在所有圖層上都不透明的部分才會顯示"}),"\n",n(c.h2,{id:"兩種內凹圓角-inner-notch-實現方式比較",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#兩種內凹圓角-inner-notch-實現方式比較",children:"兩種內凹圓角 (Inner Notch) 實現方式比較"})}),"\n",n(c.p,{children:"我們來創建兩種實現內凹圓角的方式並做測試"}),"\n",n(c.p,{children:"首先我們先建立出兩個寬度為300px和高度100px的長方形灰色長方形作為基底"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"html","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"html","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:"<"}),n(c.span,{style:{color:"#8DDB8C"},children:"div"}),n(c.span,{style:{color:"#6CB6FF"},children:" class"}),n(c.span,{style:{color:"#ADBAC7"},children:"="}),n(c.span,{style:{color:"#96D0FF"},children:'"inner-notch-bg"'}),n(c.span,{style:{color:"#ADBAC7"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" <"}),n(c.span,{style:{color:"#8DDB8C"},children:"div"}),n(c.span,{style:{color:"#6CB6FF"},children:" class"}),n(c.span,{style:{color:"#ADBAC7"},children:"="}),n(c.span,{style:{color:"#96D0FF"},children:'"rect"'}),n(c.span,{style:{color:"#ADBAC7"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:""})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:"<"}),n(c.span,{style:{color:"#8DDB8C"},children:"div"}),n(c.span,{style:{color:"#6CB6FF"},children:" class"}),n(c.span,{style:{color:"#ADBAC7"},children:"="}),n(c.span,{style:{color:"#96D0FF"},children:'"inner-notch-mask"'}),n(c.span,{style:{color:"#ADBAC7"},children:">"})]})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8DDB8C"},children:"body"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#8DDB8C"},children:"html"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" display"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"flex"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" flex-direction"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"column"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8DDB8C"},children:"body"}),n(c.span,{style:{color:"#F47067"},children:" >"}),n(c.span,{style:{color:"#8DDB8C"},children:" div"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"relative"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" margin"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"auto"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/6f5c7822159805555894796dc09ce17a-8089a7.png",alt:""})}),"\n",n(c.h3,{id:"實現一-透過背景-background-圖層拼接",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#實現一-透過背景-background-圖層拼接",children:"實現一: 透過背景 (Background) 圖層拼接"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/67fae9ee499fa7e0c36eb5f951aea4e3-f31a79.png",alt:""})}),"\n",n(c.p,{children:"使用偽元素，疊加兩個小圓"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" &::before,"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" &::after {"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" content"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#96D0FF"},children:'""'}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" border-radius"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"yellow"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/03494f2592922cab200543d7802b36aa-d4d806.png",alt:""})}),"\n",n(c.p,{children:"添加第二個小圓"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" &::before,"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" &::after {"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" content"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#96D0FF"},children:'""'}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" border-radius"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"yellow"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"unset"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" right"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/6a12209687a05b644e6fe947a3b3f29f-d5728b.png",alt:""})}),"\n",n(c.p,{children:"接著用rect去蓋住"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ."}),n(c.span,{style:{color:"#6CB6FF"},children:"rect"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"90"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" z-index"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:"\t&"}),n(c.span,{style:{color:"#6CB6FF"},children:"::before"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" content"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#96D0FF"},children:'""'}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" border-radius"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"yellow"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:"\t&"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"unset"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" right"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/f5ee4bdaf839e2b4e5e125d95b60f51f-3772ed.png",alt:""})}),"\n",n(c.p,{children:"然後調整一下rect bg"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ."}),n(c.span,{style:{color:"#6CB6FF"},children:"rect"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"90"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"blue"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" z-index"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})})]})})}),"\n",e(c.p,{children:[n(c.img,{src:"/static/d1361a1a5efac7178e90b9b486a1b85a-8975b1.png",alt:""}),"\n調整顏色，調成灰色"]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ."}),n(c.span,{style:{color:"#6CB6FF"},children:"rect"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"90"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" z-index"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::before"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" content"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#96D0FF"},children:'""'}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" border-radius"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"unset"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" right"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/03d2f6c2d3617beb1df99306c4f769a5-5423f6.png",alt:""})}),"\n",n(c.h3,{id:"實現二運用-css-masking",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#實現二運用-css-masking",children:"實現二:運用 CSS Masking"})}),"\n",e(c.p,{children:["我們定義三個css custom properties來使用，並計算端點的水平位移變量 (",n(c.code,{children:"--_d"}),")，用於精確定位左右兩側半圓的中心，確保它們與中央連接弧的切點位置正確銜接。"]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 端點半圓的半徑（控制圓潤度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 內凹連接弧的半徑（控制凹口深度尺度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 連接弧的傾角（正值=上抬，負值=下壓） */"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",e(c.p,{children:["接著創建端點水平位移變量(",n(c.code,{children:"_d"}),")，來決定左右部分離中心的距離，來確保與連接弧的切點位置。"]}),"\n",e(c.p,{children:["公式： ",e(c.span,{className:"katex",children:[n(c.span,{className:"katex-mathml",children:n(c.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:e(c.semantics,{children:[e(c.mrow,{children:[n(c.mi,{children:"d"}),n(c.mo,{children:"="}),n(c.mo,{stretchy:"false",children:"("}),n(c.mi,{children:"s"}),n(c.mo,{children:"+"}),n(c.mi,{children:"r"}),n(c.mo,{stretchy:"false",children:")"}),n(c.mo,{children:"∗"}),n(c.mi,{children:"c"}),n(c.mi,{children:"o"}),n(c.mi,{children:"s"}),n(c.mo,{stretchy:"false",children:"("}),n(c.mi,{children:"a"}),n(c.mo,{stretchy:"false",children:")"})]}),n(c.annotation,{encoding:"application/x-tex",children:"d=(s+r)∗cos(a)"})]})})}),e(c.span,{className:"katex-html","aria-hidden":"true",children:[e(c.span,{className:"base",children:[n(c.span,{className:"strut",style:{height:"0.6944em"}}),n(c.span,{className:"mord mathnormal",children:"d"}),n(c.span,{className:"mspace",style:{marginRight:"0.2778em"}}),n(c.span,{className:"mrel",children:"="}),n(c.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),e(c.span,{className:"base",children:[n(c.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),n(c.span,{className:"mopen",children:"("}),n(c.span,{className:"mord mathnormal",children:"s"}),n(c.span,{className:"mspace",style:{marginRight:"0.2222em"}}),n(c.span,{className:"mbin",children:"+"}),n(c.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),e(c.span,{className:"base",children:[n(c.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),n(c.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"}),n(c.span,{className:"mclose",children:")"}),n(c.span,{className:"mspace",style:{marginRight:"0.2222em"}}),n(c.span,{className:"mbin",children:"∗"}),n(c.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),e(c.span,{className:"base",children:[n(c.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),n(c.span,{className:"mord mathnormal",children:"cos"}),n(c.span,{className:"mopen",children:"("}),n(c.span,{className:"mord mathnormal",children:"a"}),n(c.span,{className:"mclose",children:")"})]})]})]})]}),"\n",n(c.p,{children:n(c.strong,{children:"參數意義："})}),"\n",e(c.ul,{children:["\n",e(c.li,{children:[n(c.code,{children:"r"}),"：圓角半徑。"]}),"\n",e(c.li,{children:[n(c.code,{children:"s"}),"：凹口尖點到圓角中心在斜線方向的距離。"]}),"\n",e(c.li,{children:[n(c.code,{children:"a"}),"：凹口邊緣相對於",n(c.strong,{children:"垂直線"}),"的夾角。"]}),"\n",e(c.li,{children:[n(c.code,{children:"d"}),"：將長度 ",n(c.code,{children:"s + r"})," 投影到 X 軸後的",n(c.strong,{children:"水平分量"}),"。"]}),"\n"]}),"\n",n(c.p,{children:"d的求法:"}),"\n",e(c.ul,{children:["\n",e(c.li,{children:["從凹口的正中下方（50% 的水平中心）往左/右各有一條「放置圓角中心」的射線，這條射線與垂直方向夾角為 ",n(c.code,{children:"a"}),"。"]}),"\n",e(c.li,{children:["圓角中心到尖點沿著這條射線的",n(c.strong,{children:"實際距離"}),"是 ",n(c.code,{children:"s + r"}),"（先離開尖點 ",n(c.code,{children:"s"})," 的直線段，再加上圓角半徑 ",n(c.code,{children:"r"})," 才會到圓心）。"]}),"\n",e(c.li,{children:["但我們在 CSS ",n(c.code,{children:"mask"})," 要用的是",n(c.strong,{children:"水平座標"}),"，所以要把這段長度投影到 X 軸："]}),"\n",e(c.li,{children:["水平分量 = 斜邊 × cos(角度) = ",n(c.code,{children:"(s + r) * cos(a)"}),"，這就是 ",n(c.code,{children:"d"}),"。"]}),"\n"]}),"\n",n(c.h4,{id:"步驟一使用-linear-gradient-建立主體裁切",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#步驟一使用-linear-gradient-建立主體裁切",children:["步驟一：使用 ",n(c.code,{children:"linear-gradient"})," 建立主體裁切"]})}),"\n",n(c.p,{children:"在中央切出一個矩形透明區，作為Notch的範圍。"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-mask"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 1. 核心參數 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 端點半圓的半徑（控制圓潤度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 內凹連接弧的半徑（控制凹口深度尺度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 連接弧的傾角（正值=上抬，負值=下壓） */"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 3. Mask 疊加 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask"}),n(c.span,{style:{color:"#ADBAC7"},children:":"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" 90"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" #000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" #000"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" );"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/038d9c344a489e6502b353a40bbad6ed-149805.png",alt:""})}),"\n",n(c.h4,{id:"步驟二加入中央連接弧",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#步驟二加入中央連接弧",children:"步驟二：加入中央連接弧"})}),"\n",n(c.p,{children:"使用radial-gradient挖出中央的圓弧，實現凹陷的深度與傾角。"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-mask"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 1. 核心參數 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_m"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:" / "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"2"}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" bottom"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 3. 四層 Mask 疊加 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask"}),n(c.span,{style:{color:"#ADBAC7"},children:":"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#F47067"},children:" *"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" #000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:")"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ) "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" ("}),n(c.span,{style:{color:"#6CB6FF"},children:"1"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")))),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" 90"}),n(c.span,{style:{color:"#6CB6FF"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" #000 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% "}),n(c.span,{style:{color:"#6CB6FF"},children:"-"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:" 0 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" #000 0"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" );"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/f1e0a7183a24966a84757330b08695c2-9ef3af.png",alt:""})}),"\n",e(c.p,{children:["稍微調整radial-gradient，讓我們能正確去遮罩，加入透明區塊",n(c.code,{children:"transparent 100%,"})]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:"/* Before */"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"radial-gradient("})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" var(--s) at 50% calc(-1 "}),n(c.span,{style:{color:"#8DDB8C"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" sin(var(--a)) "}),n(c.span,{style:{color:"#8DDB8C"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" var(--s)),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#FF938A",fontStyle:"italic"},children:" #000"}),n(c.span,{style:{color:"#ADBAC7"},children:" calc(100% "}),n(c.span,{style:{color:"#F47067"},children:"+"}),n(c.span,{style:{color:"#ADBAC7"},children:" 1px)"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:") 0 calc(var(--r) "}),n(c.span,{style:{color:"#8DDB8C"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" (1 - sin(var(--a)))),"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:"/* After */"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"radial-gradient("})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" var(--s) at 50% calc(-1 "}),n(c.span,{style:{color:"#8DDB8C"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" sin(var(--a)) "}),n(c.span,{style:{color:"#8DDB8C"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" var(--s)),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" transparent 100%, "}),n(c.span,{style:{color:"#FF938A",fontStyle:"italic"},children:"#000"}),n(c.span,{style:{color:"#ADBAC7"},children:" calc(100% "}),n(c.span,{style:{color:"#F47067"},children:"+"}),n(c.span,{style:{color:"#ADBAC7"},children:" 1px)"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:") 0 calc(var(--r) "}),n(c.span,{style:{color:"#8DDB8C"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" (1 - sin(var(--a)))),"})]})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-mask"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 1. 核心參數 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 端點半圓的半徑（控制圓潤度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 內凹連接弧的半徑（控制凹口深度尺度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 連接弧的傾角（正值=上抬，負值=下壓） */"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 3. Mask 疊加 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask"}),n(c.span,{style:{color:"#ADBAC7"},children:":"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#F47067"},children:" *"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:")"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ) "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" ("}),n(c.span,{style:{color:"#6CB6FF"},children:"1"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")))),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" 90"}),n(c.span,{style:{color:"#6CB6FF"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" #000 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% "}),n(c.span,{style:{color:"#6CB6FF"},children:"-"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:" 0 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" #000 0"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" );"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/d69b622ce472a768ba11135b1feb0efa-169e54.png",alt:""})}),"\n",n(c.h4,{id:"步驟三添加左右端點半圓-mask",children:e(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#步驟三添加左右端點半圓-mask",children:["步驟三：添加左右端點半圓 ",n(c.code,{children:"mask"})]})}),"\n",n(c.p,{children:"用來遮罩的半圓mask變數，寬 2r, 高 r 的下半圓"}),"\n",e(c.blockquote,{children:["\n",e(c.p,{children:["在 ",n(c.strong,{children:"radial-gradient"})," 中使用 ",n(c.code,{children:"calc(100% - 1px)"})," 是將不透明邊界往內縮 1px，藉此減少邊緣鋸齒 ",n(c.strong,{children:"(Aliasing)"})," 造成的白縫。"]}),"\n"]}),"\n",e(c.p,{children:["將這個",n(c.code,{children:"--_m"}),"變數，添加到右側mask。"]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-mask"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 1. 核心參數 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 端點半圓的半徑（控制圓潤度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 內凹連接弧的半徑（控制凹口深度尺度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 連接弧的傾角（正值=上抬，負值=下壓） */"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_m"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:" / "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"2"}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" bottom"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 3. Mask 疊加 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask"}),n(c.span,{style:{color:"#ADBAC7"},children:":"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_m"}),n(c.span,{style:{color:"#ADBAC7"},children:"),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#F47067"},children:" *"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:")"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ) "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" ("}),n(c.span,{style:{color:"#6CB6FF"},children:"1"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")))),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" 90"}),n(c.span,{style:{color:"#6CB6FF"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" #000 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% "}),n(c.span,{style:{color:"#6CB6FF"},children:"-"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:" 0 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" #000 0"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" );"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/db99567f4211f776909c87d6fbff4856-7639bc.png",alt:""})}),"\n",n(c.p,{children:"接著添加左側mask"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-mask"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 1. 核心參數 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 端點半圓的半徑（控制圓潤度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 內凹連接弧的半徑（控制凹口深度尺度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 連接弧的傾角（正值=上抬，負值=下壓） */"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_m"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:" / "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"2"}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" bottom"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 3. Mask 疊加 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask"}),n(c.span,{style:{color:"#ADBAC7"},children:":"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_m"}),n(c.span,{style:{color:"#ADBAC7"},children:"),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_m"}),n(c.span,{style:{color:"#ADBAC7"},children:"),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#F47067"},children:" *"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:")"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ) "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" ("}),n(c.span,{style:{color:"#6CB6FF"},children:"1"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")))),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" 90"}),n(c.span,{style:{color:"#6CB6FF"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" #000 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% "}),n(c.span,{style:{color:"#6CB6FF"},children:"-"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:" 0 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" #000 0"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" );"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:n(c.img,{src:"/static/72857755befd42cb9cc5a2a0cc361433-1f20f4.png",alt:""})}),"\n",n(c.h3,{id:"總結mask步驟",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#總結mask步驟",children:"總結mask步驟："})}),"\n",e(c.ol,{children:["\n",e(c.li,{children:[n(c.strong,{children:"主體裁切"})," ",n(c.strong,{children:"(linear-gradient)"}),"：先將中段挖空，提供 ",n(c.strong,{children:"Notch"})," 的工作區域。"]}),"\n",e(c.li,{children:[n(c.strong,{children:"中段連接弧"})," ",n(c.strong,{children:"(radial-gradient)"}),"：在工作區內用一個圓形",n(c.strong,{children:"挖"}),"出平滑的弧線，並進行垂直對齊。"]}),"\n",e(c.li,{children:[n(c.strong,{children:"左右端點半圓"})," ",n(c.strong,{children:"(radial-gradient)"}),"：將工作區兩側的",n(c.strong,{children:"尖角"}),"補成平滑的半圓。"]}),"\n"]}),"\n",n(c.h3,{id:"完整程式碼",children:n(c.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#完整程式碼",children:"完整程式碼"})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"html","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"html","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:"<"}),n(c.span,{style:{color:"#8DDB8C"},children:"div"}),n(c.span,{style:{color:"#6CB6FF"},children:" class"}),n(c.span,{style:{color:"#ADBAC7"},children:"="}),n(c.span,{style:{color:"#96D0FF"},children:'"inner-notch-bg"'}),n(c.span,{style:{color:"#ADBAC7"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" <"}),n(c.span,{style:{color:"#8DDB8C"},children:"div"}),n(c.span,{style:{color:"#6CB6FF"},children:" class"}),n(c.span,{style:{color:"#ADBAC7"},children:"="}),n(c.span,{style:{color:"#96D0FF"},children:'"rect"'}),n(c.span,{style:{color:"#ADBAC7"},children:">"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:""})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:"<"}),n(c.span,{style:{color:"#8DDB8C"},children:"div"}),n(c.span,{style:{color:"#6CB6FF"},children:" class"}),n(c.span,{style:{color:"#ADBAC7"},children:"="}),n(c.span,{style:{color:"#96D0FF"},children:'"inner-notch-mask"'}),n(c.span,{style:{color:"#ADBAC7"},children:">"})]})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"css","data-theme":"github-dark-dimmed",children:e(c.code,{"data-language":"css","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8DDB8C"},children:"body"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#8DDB8C"},children:"html"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" display"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"flex"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" flex-direction"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"column"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#8DDB8C"},children:"body"}),n(c.span,{style:{color:"#F47067"},children:" >"}),n(c.span,{style:{color:"#8DDB8C"},children:" div"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"relative"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" margin"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"auto"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-bg"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"circle"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" -10"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#fff"}),n(c.span,{style:{color:"#6CB6FF"},children:" 40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 0.5"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ."}),n(c.span,{style:{color:"#6CB6FF"},children:"rect"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"90"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"300"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 93"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" z-index"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::before"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" content"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#96D0FF"},children:'""'}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" position"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"absolute"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" width"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" height"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" border-radius"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" background"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"gray"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" top"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"-15"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" "})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" &"}),n(c.span,{style:{color:"#6CB6FF"},children:"::after"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" left"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"unset"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" right"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"72"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:".inner-notch-mask"}),n(c.span,{style:{color:"#ADBAC7"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 1. 核心參數 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --r"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 端點半圓的半徑（控制圓潤度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --s"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"40"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 內凹連接弧的半徑（控制凹口深度尺度） */"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --a"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"20"}),n(c.span,{style:{color:"#F47067"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:"; "}),n(c.span,{style:{color:"#768390"},children:"/* 連接弧的傾角（正值=上抬，負值=下壓） */"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 2. 計算變量 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_m"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#ADBAC7"},children:" / "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"2"}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" at"}),n(c.span,{style:{color:"#6CB6FF"},children:" bottom"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:"), "}),n(c.span,{style:{color:"#6CB6FF"},children:"transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:");"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#F69D50"},children:" --_d"}),n(c.span,{style:{color:"#ADBAC7"},children:": ("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:")) * "}),n(c.span,{style:{color:"#6CB6FF"},children:"cos"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:"));"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#768390"},children:" /* 3. Mask 疊加 */"})}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask"}),n(c.span,{style:{color:"#ADBAC7"},children:":"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_m"}),n(c.span,{style:{color:"#ADBAC7"},children:"),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_m"}),n(c.span,{style:{color:"#ADBAC7"},children:"),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" radial-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"at"}),n(c.span,{style:{color:"#6CB6FF"},children:" 50"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"-1"}),n(c.span,{style:{color:"#F47067"},children:" *"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")) "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--s"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#6CB6FF"},children:" 100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#ADBAC7"},children:", "}),n(c.span,{style:{color:"#6CB6FF"},children:"#000"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"100"}),n(c.span,{style:{color:"#F47067"},children:"%"}),n(c.span,{style:{color:"#F47067"},children:" +"}),n(c.span,{style:{color:"#6CB6FF"},children:" 1"}),n(c.span,{style:{color:"#F47067"},children:"px"}),n(c.span,{style:{color:"#ADBAC7"},children:")"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" ) "}),n(c.span,{style:{color:"#6CB6FF"},children:"0"}),n(c.span,{style:{color:"#6CB6FF"},children:" calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--r"}),n(c.span,{style:{color:"#ADBAC7"},children:") "}),n(c.span,{style:{color:"#F47067"},children:"*"}),n(c.span,{style:{color:"#ADBAC7"},children:" ("}),n(c.span,{style:{color:"#6CB6FF"},children:"1"}),n(c.span,{style:{color:"#F47067"},children:" -"}),n(c.span,{style:{color:"#6CB6FF"},children:" sin"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--a"}),n(c.span,{style:{color:"#ADBAC7"},children:")))),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" linear-gradient"}),n(c.span,{style:{color:"#ADBAC7"},children:"("})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" 90"}),n(c.span,{style:{color:"#6CB6FF"},children:"deg"}),n(c.span,{style:{color:"#ADBAC7"},children:","})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#ADBAC7"},children:" #000 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% "}),n(c.span,{style:{color:"#6CB6FF"},children:"-"}),n(c.span,{style:{color:"#6CB6FF"},children:" var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" transparent"}),n(c.span,{style:{color:"#ADBAC7"},children:" 0 "}),n(c.span,{style:{color:"#6CB6FF"},children:"calc"}),n(c.span,{style:{color:"#ADBAC7"},children:"(50% + "}),n(c.span,{style:{color:"#6CB6FF"},children:"var"}),n(c.span,{style:{color:"#ADBAC7"},children:"("}),n(c.span,{style:{color:"#F69D50"},children:"--_d"}),n(c.span,{style:{color:"#ADBAC7"},children:")),"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" #000 0"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:" );"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",e(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#6CB6FF"},children:" mask-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:": "}),n(c.span,{style:{color:"#6CB6FF"},children:"no-repeat"}),n(c.span,{style:{color:"#ADBAC7"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#ADBAC7"},children:"}"})})]})})}),"\n",n(c.p,{children:"codepen:"}),"\n",n(s,{codePenId:"XJXgjRx"})]})}return{default:function(l={}){const{wrapper:e}=l.components||{};return e?n(e,{...l,children:n(_createMdxContent,{...l})}):_createMdxContent(l)}};

Interaction Design Note

Interaction Design Note

Interaction Design Note

Interaction Design Note