CSS實現鏤空效果

2021-09-24 07:06:33 字數 1036 閱讀 4570

主要利用css漸變實現一些不需要切圖的背景鏤空

.mixinsticket(@width, @height, @r, @left, @lcolor, @rcolor) 


複製**

.mixinsticket1(@width, @height, @r, @top, @color) 


}複製**

ps: 鋸齒跟裝置的顯示有關係

.mixinflag(@width, @height, @bg) when(default()) 


.mixinflag(@width, @height, @bg) when(@width > @height) 


複製**

.mixinsmark(@width, @height, @bg) 


複製**
ps:以上效果四個方向都可以實現，其他方向**沒有貼出，原理相同

css 


複製**

.mask 


複製**
每一層漸變都可被當做一張背景圖，也就是說每一層漸變都可以指定其position、size、repeat。玩過ps的的同學應該知道圖層的概念，咱們的背景圖層疊原理也類似（當然，漸變也可以當背景圖），控制漸變的大小，**需要鏤空，以及需要顯示的位置、是否平鋪，就可以實現大多數場景下的基本效果，當然，一張切圖來的更快，但是有時候切圖並不能適應所有的場景。

掌握background的書寫順序可以幫助在腦海中構思自己想要的效果：

background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

希望能幫助有需要的小夥伴

iOS 引導頁的鏤空效果例項

初衷 最近專案新功能更改較大，產品童鞋要求加入新功能引導，於是一口氣花了兩天的時間做了乙個引導頁，當然加上後面的修www.cppcns.com修補補的時間，就不只兩天了，不過這事情其實是一勞永逸的事情，值得做。同時為了能夠更好的復用，我把它做成了pod庫，專案位址在這裡 eafeatureguide...

css實現漸變效果

div style filter alpha opacity 30 finishopacity 0 style 1 progid dximagetransform.microsoft.gradient startcolorstr red,endcolorstr blue,gradienttype 1...

css 實現透明效果

filter alpha opacity 50 moz opacity 0.5 khtml opacity 0.5 opacity 0.5 說明 opacity 0.5 這是最重要的，因為它是css標準.該屬性支援firefox,safari和 opera.filter alpha opacity ...