[隨筆] 用 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 當紅炸子雞的套件,所以我還是記一下,以防以後有需要用到又忘了。

留言

  1. mask-image 只有 chrome 支持啊,连 firefox 也不支持,你们就直接用,不用考虑兼容性嘛?你们台湾现在一般 IE 兼容到几?

    回覆刪除
  2. 不好意思,收回之前的问题,看了 文中 stackoverflow 的链接,明白了,不过还是可以回答一下另外的问题

    回覆刪除

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源