熟练使用CSS搭建一个渐变色二维码

.g-container{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?00px锛涢珮搴︼細200px锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘簳閮細0锛涘彸锛?锛涜儗鏅細绾挎€ф笎鍙橈紙45deg锛?673ab7锛?ff5722锛夛紱娣峰悎娣峰悎妯″紡锛氬彉浜紱}}杩欓噷锛屾垜浠娇鐢ㄧ埗鍏冪礌鐨勪吉鍏冪礌淇濆瓨浜嗕竴涓爣绛撅紝浣滀负娓愬彉灞備娇鐢ㄣ€傛垜涓哄疄闄呯殑鍙犲姞鏁堟灉鍋氫簡涓€涓姩鐢伙細杩欐牱鎴戜滑灏卞彲浠ラ€氳繃娣峰悎妯″紡灏嗕竴涓粦鑹茬殑浜岀淮鐮佸浘鐗囧彉鎴愭笎鍙樿壊銆備簩缁寸爜涓棿闀傜┖褰撶劧锛岃繖杩樻病鏈夌粨鏉熴€傛湁鏃跺€欙紝鎴戜滑鐨勪簩缁寸爜涓棿浼氬嚭鐜颁竴浜涘浘妗堬紝姣斿鍦嗗舰鎴栬€呮柟褰㈢殑鍥剧墖銆傚鏋滅敤涓婇潰鐨勬柟娉曪紝浼氭湁涓€浜涚憰鐤碉細閭ｄ箞锛屾垜浠繕闇€瑕佹牴鎹簩缁寸爜鐨勬牱寮忥紝鎶婁腑闂寸殑娓愬彉鍥炬鎸栫┖锛佹湁瓒ｇ殑鏄紝浜岀淮鐮佷腑闂寸殑鍥炬涔熷彲浠ユ槸鍦嗗舰鎴栫煩褰€傚浜庤繖涓ょ浜岀淮鐮侊紝澶勭悊鏂规硶鏄笉涓€鏍风殑銆傛笎鍙樺浘妗堜腑澶晜绌轰竴涓渾鍦堛€傚浜庝腑蹇冨浘妗堜负鍦嗗舰鐨勪簩缁寸爜锛屾垜浠彧闇€瑕佸疄鐜拌繖鏍风殑娓愬彉锛岀劧鍚庡彔鍔犲嵆鍙細杩欎釜姣旇緝绠€鍗曘€傜敱浜庢湰鏉ュ氨鏄嚎鎬ф笎鍙橈紝涓棿闇€瑕佹寲绌轰竴涓渾鍦堛€傛渶濂界殑鏂规硶鏄娇鐢╩ask:div{background:linear-gradient(45deg,rgb(51,102,153),rgb(255,0,204));mask:radial-gradient(rgba(0,0,0,0),rgba(0,0,0,0)16%,rgb(0,0,0)16%);}鍦ㄧ煩褰腑鎸栫┖涓€涓煩褰㈡笎鍙樺浘妗堢殑涓績銆備絾鏄紝瀵逛簬涓棿鐨勪竴涓煩褰紝涓嶅ソ澶勭悊鐜板湪锛屾垜浠渶瑕佸疄鐜拌繖鏍蜂竴涓熀浜庢笎鍙樺浘妗堢殑鍥惧舰锛氬叾瀹炴湁寰堝鏂规硶锛屾瘮濡傛垜浠妸涓棿鐨勯€忔槑閮ㄥ垎鎯宠薄鎴愮殑鍐呭閮ㄥ垎涓€涓猟iv锛屽懆鍥寸殑娓愬彉鑹插尯鍩熶负杈规鍖哄煙銆傚綋鐒舵垜杩欓噷浣跨敤浜哻lip-path锛屽疄鐜扮┖蹇冪煩褰篃寰堟柟渚匡細div{background:linear-gradient(45deg,rgb(51,102,153),rgb(255,0,204));鍓緫璺緞锛氬杈瑰舰锛?%0%锛?%100%锛?4%100%锛?4%34%锛?6%34%锛?6%66%锛?4%66%锛?4%100%锛?00%100%,100%0%);}鍒朵綔浜岀淮鐮佺潃鑹插伐鍏峰熀浜庝互涓婄煡璇嗭紝鎴戜滑鍙互绠€鍗曠殑鎼缓涓€涓笎鍙樿壊浜岀淮鐮佸伐鍏枫€傝繖閲屾垜绠€鍗曞疄鐜颁簡涓€涓細鎴戜滑涓婁紶涓€涓櫘閫氫簩缁寸爜锛岃嚜瀹氫箟娓愬彉鑹诧紝閫夋嫨鏄惁闀傜┖锛岄晜绌虹殑绫诲瀷鍜屽ぇ灏忥紝蹇€熷垱寤轰竴涓笎鍙樿壊浜岀淮鐮併€傜畝鍗曟紨绀轰竴涓嬶細涓€涓互CSS涓烘牳蹇冪殑灏忓伐鍏峰氨瀹屾垚浜嗐€傚畬鏁翠唬鐮佸彲浠ョ偣鍑昏繖閲岋細CodePen-MakeAGradientQrCode鏈€鍚庢€荤粨涓€涓嬶紝鏈枃浠嬬粛浜嗕娇鐢–SS娣峰悎妯″紡鑾峰彇娓愬彉浜岀淮鐮佺殑鎶€宸э紝浣跨敤mask鎴朿lip-path闀傜┖娓愬彉鍥惧舰,涓€浜涚浉鍏崇煡璇哖oint濡傛灉浣犺繕鏈夌枒鎯戯紝鎺ㄨ崘浣犵湅涓嬫垜鐨勫嚑绡囨枃绔狅細涓嶅彲鎬濊鐨勬贩鍚堟ā寮弇ix-blend-mode涓嶅彲鎬濊鐨勬贩鍚堟ā寮廱ackground-blend-mode涓よCSS浠ｇ爜瀹炵幇鍥剧墖浠绘剰棰滆壊鐫€鑹叉妧鏈簿褰〤SSMASK宸у鍦板埄鐢–SS瀹炵幇浜嗗褰╃殑涓夎褰㈣竟妗嗗姩鐢汇€傛湰鏂囧埌姝ょ粨鏉熴€傚笇鏈涘浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屼笉鏂洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>