缁忓父浣跨敤photoshop鐨勫悓瀛﹀杩欑閫忔槑缃戞牸鐨勮儗鏅潪甯哥啛鎮夛紝鏈夌殑琚О涓衡€滄鐩樷€濇晥鏋溿€傚繀椤诲湪娌℃湁娓愬彉鐨勬儏鍐典笅瀹炵幇浠ヤ笅鏁堟灉銆傝繖绡囨枃绔犱粙缁?绉嶇粯鍒堕€忔槑缃戞牸鐨凜SS鎶€宸?.linear-gradientlinear-gradient鍙互璇存槸鏈€鏃╁疄鐜拌繖绉嶆晥鏋滅殑搴旂敤锛屽綋鐒跺疄鐜拌捣鏉ヤ篃鏄渶宸у涔熸渶澶嶆潅鐨勩€傚師鐞嗗氨鏄敾涓や釜鐩磋涓夎褰紝鐒跺悗鎷兼帴鍦ㄤ竴璧枫€備笅闈㈡渶灏忕殑鎷兼帴鍗曞厓鍏跺疄灏辨槸杩欐牱涓€涓浘銆?5deg鏂瑰悜鐨勬搴︽槸涓轰簡渚夸簬瑙傚療銆備互涓嬫墍鏈夋紨绀虹殑棰滆壊鍜屽昂鐮侀兘缁忚繃鐗规畩澶勭悊锛屼笅鍚屻€俠g{background-image:linear-gradient(45deg,#eee25%,transparent25%,transparent75%,#eee75%)}杩欐牱骞抽摵锛岀劧鍚庡啀鐢讳竴涓竴鏍风殑锛屼笅闈㈤敊浣嶆嫾鎺ヤ竴寮犲姩鍥炬潵鍏呭垎琛ㄨ揪瀹炴柦杩囩▼銆備互涓嬫槸瀹屾暣浠ｇ爜.bg{width:400px;楂樺害锛?00px锛涜儗鏅浘鍍忥細绾挎€ф笎鍙橈紙45deg锛?eee25%锛岄€忔槑25%锛岄€忔槑75%锛?eee75%锛夛紝绾挎€ф笎鍙橈紙45deg锛?eee25%锛岄€忔槑25%锛岄€忔槑75%锛?eee75%);鑳屾櫙灏哄锛?6px16px锛沚ackground-position:00,8px8px;}绗簩锛宺epeating-linear-gradientrepeating-linear-gradient涔熷彲浠ヨ揪鍒扳€滄鐩樷€濈殑鏁堟灉锛屼篃姣旇緝瀹规槗鐞嗚В锛屼絾鏄敾妯潯绾归渶瑕佷竴鐐规妧宸фā寮忕涓€銆俠g{background-image:repeating-linear-gradient(#eee08px,transparent016px)}鐒跺悗鐢讳竴鏉＄珫鏉＄汗.bg{background-image:repeating-linear-gradient(#eee08px,transparent016px),repeating-linear-gradient(90deg,#eee08px,transparent016px)}濡傛灉瀹冩槸鐏拌壊鐨勶紝鐪嬭捣鏉ヨ繖鏄氦閿欐潯绾归噸鍙犵殑鍦版柟銆傝繖绉嶆儏鍐典笅锛屽彲浠ヨ€冭檻娣诲姞鑳屾櫙娣峰悎妯″紡锛堟贩鍚堟ā寮忓彲浠ュ弬鑰冨紶鏂版棴鐨勮繖绡囨枃绔狅細娣卞叆鐞嗚ВCSSmix-blend-mode婊ら暅灞忓箷娣峰悎妯″紡锛夛紝杩欓噷鐢ㄧ殑鏄€滄护缃戔€濓紝鍙互杩囨护鎺夐粦鑹查儴鍒嗐€傚鏋滄槸娴呯伆鑹诧紝鍓╀笅鐨勯鑹插嚑涔庡氨鏄€滅櫧鈥濅簡銆傚涓嬪浘锛屸€滄鐩樷€濇晥鏋滃氨鍑烘潵浜嗕笅闈㈡槸瀹屾暣鐨勪唬鐮併€俠g{width:400px;楂樺害锛?00px锛涜儗鏅浘鍍忥細閲嶅绾挎€ф笎鍙橈紙#eee08px锛岄€忔槑016px锛夛紝閲嶅绾挎€ф笎鍙橈紙90deg锛?eee08px锛岄€忔槑016px锛夛紱background-blend-mode:screen;}鑰屼笖锛岃繖涓柟娉曞彲浠ュ疄鐜颁换鎰忓€炬枩瑙掑害鐨勬晥鏋溿€備緥濡傦紝娣峰悎妯″紡鏈夊緢澶氶檺鍒躲€傜洰鍓嶇湅鏉ワ紝鍦ㄨ繖涓祬鐏拌壊閲屼技涔庢病鏈夐棶棰樸€傛敼鍙樺彟涓€绉嶉鑹插彲鑳戒笉璧蜂綔鐢ㄣ€傛瘮濡傝繖涓渶瑕佹牴鎹疄闄呮儏鍐典娇鐢ㄣ€?.conc-gradientconc-gradientconicalgradient绠楁槸瀹樻柟鐨勮В鍐虫柟妗堬紙MDN涓婃湁杩欎釜妫嬬洏鏍兼渚嬶級锛屼絾鏄吋瀹规€х◢宸€備笅闈㈠姩鍥炬潵瀹屾暣琛ㄨ揪瀹炵幇杩囩▼銆備唬鐮?bg{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅浘鍍忥細鍦嗛敟姊害锛?eee025%锛岄€忔槑050%锛?eee075%锛岄€忔槑0锛夛紱background-size:16px16px;}鍏跺疄涔熷彲浠ョ敤repeating-conic-gradient鏉ヤ紭鍖栵紙鍘熺悊鏄竴鏍风殑锛屾墍浠ュ綊涓哄悓涓€绉嶆柟娉曪級锛屽悗闈袱绉嶉鑹叉槸鍓嶉潰涓ょ棰滆壊閲嶅鐨勶紝鎵€浠ュ畠鍙互鍙敤涓ょ棰滆壊鏉ュ疄鐜般€俠g{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅浘鍍忥細閲嶅鍦嗛敟姊害锛?eee025%锛岄€忔槑050%锛夛紱background-size:16px16px;}杩欏簲璇ョ畻鏄函CSS鏂规涓渶绮剧畝鐨勪簡锛屽叾瀹炰綘鍙兘涓嶄細鐢ㄥ埌杩欎簺銆傚敖绠SS娓愬彉鍙互宸у鍦板疄鐜拌繖浜涙ā寮忥紝浣嗘偍鍦ㄦ甯稿伐浣滀腑鍙兘涓嶄細杩欐牱鍋氥€傜洿鎺ユ埅鍥惧氨鍙互浜嗭紝姣斿鐩存帴鍦‵鍦╥gma涓粯鍒惰繖鏍蜂竴涓猄VG锛岀洿鎺ヤ娇鐢ㄨ繖涓浘鍍忋€俠g{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅浘鐗囷細url('xxx.svg');background-size:16px16px;}10绉掕繖鏍蜂竴涓€滄鐩樷€濇晥鏋滅敤鐨勬椂闂村皯锛岀畝鍗曞揩鎹凤紝娌℃湁鍏煎鎬ч棶棰樸€侰SS娓愬彉鏄浮鑲嬪悧锛熷綋鐒朵笉鏄紒CSS娓愬彉鏄姩鎬佺粯鍒剁殑锛屾偍鍙互鍔ㄦ€佽皟鏁撮鑹层€佸ぇ灏忔垨褰㈢姸锛岃繖鏄潤鎬佸浘鍍忔棤娉曞疄鐜扮殑銆備緥濡傦紝鎭愭€曚綘闇€瑕佷繚瀛樺寮犲浘鐗囷紝浣嗗浜庢笎鍙橈紝鍙渶鏇存敼涓€涓鑹插€煎嵆鍙€俠g{瀹藉害锛?00px;楂樺害锛?00px锛涜儗鏅浘鍍忥細閲嶅鍦嗛敟姊害锛坴ar锛?-color锛?25%锛岄€忔槑050%锛夛紱background-size:16px16px;}.bg1{--color1:gray;}.bg2{--color1:yellow;}.bg1{--color1:blue;}鏇村鏈€閲嶈鐨勪竴鐐规槸锛屽涔犳帉鎻℃笎鍙樻槸瀵规彁楂樿嚜宸辩殑CSS姘村钩寰堟湁甯姪銆備絾鏄紝涔熼渶瑕佹牴鎹疄闄呮儏鍐佃€屽畾銆傚鏋滀綘涓嶉渶瑕佸姩鎬佹敼鍙樹竴浜涙牱寮忥紝SVG鍥惧儚涔熸槸涓€涓ソ鏂规硶锛屼絾涓嶈鍋滄鎬濊€凁煠斻€?/p>
