[ CSS 05 ] 遮罩裁切相關

clip-path

區域內的部分顯示，區域外的隱藏
但被隱藏的區域還是有佔空間，有點像 visibility:hidden 而不是 display:none
以下舉幾個 value 例子

// 圓
clip-path: circle(40%);
clip-path: circle(60px at 80% 65%);// 左上0,0 xy軸算圓心 

// 多邊形
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

// 路徑
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

polygon 是所有可用形狀中最靈活的，因為它允許指定任意數量的點，有點像SVG路徑。提供的點是可以任意單位（例如：基於像素或基於百分比）的X和Y坐標對。因為它是最靈活的，所以它也是最複雜的，可能需要使用工具來定義點。

推薦工具 : https://bennettfeely.com/clippy/
一個視覺化切不規則的形狀的好工具，有一些現成形狀或是自己編輯都可以，編輯好形狀複製 code 就好了

clip-path 也可以使用 Animations 和 Transitions 來做動畫轉場

&:hover { animation: masktest 1s ;}
@keyframes masktest {
    0% {clip-path: circle(80px at 80% 65%);}
    100% {clip-path: circle(0 at 80% 65%);}
}

mask

通過遮罩或者裁切特定區域圖片的方式來隱藏一個元素的部分區域。
因為他也可以裁切所以和 clip-path 類似，但如果我圖片有半透明的部分或是我想要遮的區域形狀特殊，如果用 clip-path: polygo 或 clip-path: path 會算的半死，那就用 mask 比較方便。

語法

下面很多語法記得要加上前綴 -webkit-，讓有些瀏覽器支援。

<mask-reference>
路徑。詳見 mask-image。
<mask-mode>
遮罩圖片模式，但目前只有 Firefox 支援。詳見 mask-mode。
<position>
遮罩圖片位置。詳見 mask-position
<bg-size>
設置遮罩的大小。詳見 mask-size
<repeat-style>
遮罩圖片重複性。詳見 mask-repeat。
<geometry-box>
如果只有一個 <geometry-box> ，會同時設置 mask-origin 和 mask-clip 。如果有兩，第一個值代表 mask-origin 第二個值代表 mask-clip 。
<compositing-operator>
混合使用 mask，詳見 mask-composite

實例

上下滑動頁面草會把文字遮住的例子

See the Pen mask by TzuTzu (@tzutzu858) on CodePen.

補充 :

radial-gradient 放射漸變

https://developer.mozilla.org/zh-TW/docs/Web/CSS/radial-gradient()
使用 radial-gradient() 這個函式，可以使圖片，從原點輻射綻開或是兩個、多個顏色漸變
EX :

// 兩種顏色以中心點往外漸變
background: radial-gradient(#e66465, #9198e5);

// 多種顏色以中心點往外漸變
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

// 上下顏色漸變
background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);