[隨筆] 用 css mask-image 做遮罩

晚上剛好幫我朋友看一個 colorbox 的問題，起初我以為只是一個改改 css  border-radius 就好的問題，沒想到弄到最後竟然去找 mask-image 的方法。

情況是他希望在 colorbox 打開時，四邊都維持某種程度的 border-radius，但是在 colorbox 的 iframe 裡面，當你 scroll 時，border-radius 就失效了，其實不是失效，而是裡面的 div 的背景色本來就存在於那個區域，所以 content 是滿的沒有錯

廢話不多說，我只能講最後我用了這個方法，他使用了 mask-image 的方式去做遮罩的概念，在 colorbox 那一個 iframe 做這層，就可以一直 mask 四邊都有 border-radius 的效果:  How to make CSS3 rounded corners hide overflow in Chrome/Opera。

改完之後不管裡面怎麼捲，都能維持外框有 border-radius 的情況:

太久沒有好好研究 css，已經退化到這種程度也真是一種悲哀。
因為 colorbox 一直都是網頁製作 popup/lightbox 當紅炸子雞的套件，所以我還是記一下，以防以後有需要用到又忘了。