晚上剛好幫我朋友看一個 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 當紅炸子雞的套件,所以我還是記一下,以防以後有需要用到又忘了。
情況是他希望在 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 當紅炸子雞的套件,所以我還是記一下,以防以後有需要用到又忘了。
mask-image 只有 chrome 支持啊,连 firefox 也不支持,你们就直接用,不用考虑兼容性嘛?你们台湾现在一般 IE 兼容到几?
回覆刪除一般到 8 以上 :P
刪除不好意思,收回之前的问题,看了 文中 stackoverflow 的链接,明白了,不过还是可以回答一下另外的问题
回覆刪除