使用css製作倒影

標籤：bsp   bottom   svg   rgb   一個   分享   strong   linear   效果   

-webkit-mask

這個屬性是相當強大的，所以詳細的介紹超出了本文的範疇，它非常值得深入研究，因為它可以在實際應用中為你省掉很多時間。

-webkit-mask讓為一個元素添加蒙板成為可能，從而你可以建立任意形狀的花樣。蒙板可以是CSS3漸層或者半透明的PNG圖片。蒙板元素的alpha值為0的時候會覆蓋下面的元素，為1的時候會完全顯示下面的內容。相關的屬性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等，嚴重依賴來自於background中的文法。

 

樣本

圖片蒙板:

.mask {  width: 50px;  height: 50px;  background: url("./logo.svg") repeat;  -webkit-mask: url("./logo.svg");}

　　效果：

 

 

樣本

漸層蒙板:

.mask {  width: 50px;  height: 50px;  background: url("./logo.svg") repeat;  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));}

　　效果：

 

使用css製作倒影