詳解css3 mask遮罩實現一些特效

2022-09-21 03:06:09 字數 1090 閱讀 1177

遮罩mask的功能就是使用透明的或漸變遮罩元素的背景。於是,遮罩mask與背景background非常類似,除了沒有color子屬性,背景background剩下的6個子屬性,mask都有 遮罩mask是乙個復合屬性,包括mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-composite這8個屬性注意:ie瀏覽器不支援,webkit核心的瀏覽器(包括chrome、safari、ios、android)需要新增-webkit-字首。要特別注意的是,firefox瀏覽器也支援webkit-mask屬性

【mask-image】

預設值為none,值為透明,或透明漸變

【mask-repeat】

預設值為repeat,可選值與background-repeat相同

【mask-position】

預設值為0 0,可選值與background-position相同

【mask-clip】

預設值為border-box,可選值與background-clip相同

【mask-origin】

預設值為border-box,可選值與background-origin相同

【mask-size】

預設值為auto,可選值與background-size相同

【mask-mode】

預設值為match-source,可選值為alpha、luminance、match-source,或者它們的組合

【mask-composite】

預設值為add,可選值為add、subtract、intersect、exclude

[注意]只有firefox支援mask-mode和mask-composite

一,高斯模糊+mask遮罩

程式設計客棧原始碼

title

程式設計客棧uot;>

二,窺見一點

原始碼document

三,鏤空效果

原始碼document

專治各種不服+=

專治各種不服

本文標題: 詳解css3 mask遮罩實現一些特效

本文位址:

CSS3 mask 遮罩的具體使用方法

css的mask屬性允許使用者通過部分或者完全隱藏乙個元素的可見區域。這種效果可以通過遮罩或者裁切特定區域的。mask的簡寫會將 mask border 設為初始值。使用mask的簡寫優於其他簡寫或者各自屬性的設定來覆蓋。這能保證mask border也會重新設定為新的效果樣式。mask image...

詳解CSS3特性 Media如何實現響應式設計

2013年響應式設計已經成為國外 的一項標配功能,國內越來越多的開發人員開始關注響應式設計,2014年相信國內更多的 也將使用響應式設計,因為利用css3特性 media將很簡單就能實現響應式設計,一次開發同時能在手機,平板,pc桌面等不同解析度的裝置下擁有較好的瀏覽體驗。在 css2 中,你可以為...

Css3 實現迴圈留言滾動效果(一)

html div class runlist div class runitem span class name 張三丰 span 訪問了你的名片 div div class runitem span class name 王曉華 span 訪問了你的名片 div div class runitem...