mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.html mask 的屬性： -webkit-mask-image:url | gradient /*可以使用圖片或漸變作為遮罩層 ...

最近在b站上看到一種彈幕效果叫做智能防擋彈幕，也就是傳說中的蒙版彈幕， 打開之后效果大概是這樣的 再也不用擔心男神女神的絕世容顏被花里胡哨的彈幕擋住啦，是不是感覺很神奇。 實現原理其實就是類似於ps的蒙版，也就是說將圖像的一部分 “隱藏”。這里我們需要用到的是css3的mask遮罩屬性 ...

-webkit-mask： 蒙版，用於將固定形狀設置透明度，形狀可以是一個div，也可以是一張圖片； 用法：-webkit-mask: radial-gradient(transparent 50px, rgb(0,0,0) 51px); ...

項目中，一般用於業務辦理的進度條，設置背景色，純背景色可以直接設置，如果是漸變色，那使用line-gradient漸變特性就需要設置漸變的位置了入下圖 方法一、直接在進度條軌道上面再加一個元素，用於設置漸變進度條，進而控制這個元素的長度值，可以實現 2、方法二，就是使用 ...

今天總結漸變的問題，漸變分為線性漸變、徑向漸變。呼呼，廢話少說， 線性漸變：background:linear-gradient(設置漸變形式,第一個顏色起點,中間顏色點 中間顏色的位置,結束點顏色); Linear:漸變的類型（線性漸變）； 漸變的形式：可選參數 有兩種方式-1、設置旋轉 ...

1，有利於代碼維護，有利於使用debug進行調試打斷點。2，后面三個都存在計算，所以分開寫最好。背景復合屬性最好的寫法，background:#abcdef url() no-repeat 50px ...

設置最終形狀參數： ellipse circle 設置長半軸和短半軸 設置橢圓 ...