CSS高级技巧-角渐变的神奇使用！

div{margin:auto;瀹藉害锛?00px锛涢珮搴︼細500px锛涜儗鏅細閲嶅绾挎€ф笎鍙橈紙90deg锛?aec8ee0锛?aec8ee1px锛岄€忔槑1px锛岄€忔槑100px锛夛紝閲嶅绾挎€ф笎鍙橈紙#aec8ee0锛?aec8ee1px锛岄€忔槑1px锛岄€忔槑100px锛夛紝#0e284d;}浣跨敤涓ゅ眰閲嶅鍜岀嚎鎬ф笎鍙橈紝鎴戜滑鍙互寰堝揩寰楀埌杩欐牱鐨勫浘妗堬細鏈変簡杩欐牱鐨勭綉鏍间箣鍚庯紝鍓╀笅瑕佽В鍐崇殑灏辨槸濡備綍涓€涓竴涓湴鐢诲嚭灏忓崄瀛楋細鍦ㄦ鐩樺竷灞€涓紝鎴戜滑灏濊瘯杩囦娇鐢ㄥ涓猙ox-shadows鏉ュ疄鐜扮被浼肩殑妯″紡銆傚湪鏈枃涓紝鎴戜滑灏嗗皾璇曚娇鐢ㄨ搴︽笎鍙樻潵蹇€熷疄鐜拌繖绉嶅舰鐘讹紒瑙掔偣娓愬彉鎶€宸у湪姝や箣鍓嶏紝鎴戜滑鍏堟潵瀛︿範涓€涓嬭鐐规笎鍙樻妧宸с€俢ornergradient锛屼篃鍙玞onic-gradient锛屽ぇ瀹跺瀹冭繕姣旇緝闄岀敓锛屽彲浠ュ厛鐪嬬湅鎴戠殑鏂囩珷鈥斺€旂濂囩殑conic-gradientcornergradient銆備緥濡傦細{background:conic-gradient(deeppink,yellowgreen);}浠庢笎鍙樼殑涓績锛屾笎鍙樼殑璧峰瑙掑害锛屾笎鍙樼殑鏂瑰悜鏉ョ湅锛屾槸杩欐牱鐨勶細focus锛氬浣犳墍瑙佷粠鍥句腑鐪嬭搴︿负娓愬彉璧峰涓績鐐广€佽捣濮嬭搴﹀拰娓愬彉鏂瑰悜濡備笅锛氳捣濮嬬偣涓哄浘褰腑蹇冿紝榛樿娓愬彉瑙掑害0deg鏄粠鍨傜洿浜庡浘褰腑蹇冪殑娓愬彉鏂瑰悜瀹炵幇鐨勪粠涓婃柟缁曚腑蹇冮『鏃堕拡鏃嬭浆銆傚綋鐒讹紝鎴戜滑涔熷彲浠ユ帶鍒惰搴︽笎鍙樼殑璧峰鐐硅捣濮嬭搴﹀拰瑙掑害娓愬彉鐨勪腑蹇冦€傜◢寰慨鏀逛竴涓嬩笂闈㈢殑浠ｇ爜锛歿background:conic-gradient(from270degat50px50px,deeppink,yellowgreen);}鏁堟灉濡備笅锛氭垜浠敼鍙樹簡瑙掑害娓愬彉鐨勮捣濮嬭搴﹀拰涓績锛氬熀浜庝笂鍥撅紝鎴戜滑閲嶆柊缁樺埗涓€涓浘褰細div{margin:auto;瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細鍦嗛敟娓愬彉锛堜粠270degat50px50px,deeppink0%,deeppink90deg,transparent90deg,transparent360deg锛夛紱border:1pxsolid#000;}鏁堟灉濡備笅锛氳捣濮嬭搴﹀拰瑙掑害娓愬彉涓績涓嶅彉锛屽彧鏄墠90deg鐨勫浘褰㈡槸绮夌孩鑹茬殑锛屽悗闈?70deg鐨勫浘褰㈣缃负閫忔槑銆傛垜浠娇鐢ㄨ娓愬彉鏉ュ疄鐜板浘鍍忓唴閮ㄧ殑涓€涓皬鐭╁舰锛佹帴涓嬫潵锛岃鎴戜滑鍦ㄤ笂鍥句腑娣诲姞涓€涓猙ackground-position:-25px,-25px:div{margin:auto;瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細鍦嗛敟娓愬彉锛堜粠270degat50px50px,deeppink0%,deeppink90deg,transparent90deg,transparent360deg锛夛紱鑳屾櫙浣嶇疆锛?25px-25px锛沚order:1pxsolid#000;}杩欐牱锛屾垜浠濂囧湴寰楀埌浜嗚繖鏍蜂竴涓浘褰細涓轰粈涔堜細鍑虹幇杩欐牱鐨勭幇璞″憿锛熷鏋滄垜浠坊鍔燽ackground-repeat:no-repeat:div{margin:auto;瀹藉害锛?00px锛涢珮搴︼細200px锛涜儗鏅細鍦嗛敟娓愬彉锛堜粠270degat50px50px,deeppink0%,deeppink90deg,transparent90deg,transparent360deg锛夛紱鑳屾櫙浣嶇疆锛?25px-25px锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱border:1pxsolid#000;}閭ｄ箞灏卞彧鍓╀笅宸︿笂瑙掍簡锛氭墍浠ワ紝杩欓噷鍏跺疄鐢ㄥ埌Gradient鐨勫浘褰㈤兘浼氶粯璁ゆ湁repeat鐨勭壒鎬э紝鍏跺疄灏辨槸杩欎釜鎰忔€濓細鐞嗚В杩欏紶鍥撅紝鐞嗚В鏁翠釜鎶€宸х殑鏍稿績锛佺悊瑙ｄ笂闈㈢殑鎶€宸у疄鐜板浘褰㈢殑鍔犲彿鐞嗚В浜嗕笂闈㈢殑鎶€宸т箣鍚庯紝鎴戜滑鍙互鍥炲埌鎴戜滑闇€瑕佸疄鐜扮殑鍥惧舰涓婏紝鍐嶄娇鐢ㄤ袱灞傝搴︽笎鍙樻潵寰楀埌鎴戜滑鎯宠鐨勫浘褰€傜涓€灞傦細div{background:conic-gradient(from270degat5px20px,#31c2ec90deg,transparent0deg),repeating-linear-gradient(90deg,#aec8ee0,#aec8ee1px,transparent1px,transparent100px),repeating-绾挎€ф笎鍙橈紙#aec8ee0锛?aec8ee1px锛岄€忔槑1px锛岄€忔槑100px锛夛紝#0e284d锛涜儗鏅噸澶嶏細閲嶅锛屼笉閲嶅锛屼笉閲嶅锛涜儗鏅ぇ灏忥細100px100px,100%100%,100%100%;background-position:-2.5px-10px,00,00;}鏁堟灉濡備笅锛氭垜浠湪杩欓噷鍋氫簡浠€涔堬紵鎴戜滑娣诲姞鐨勬笎鍙樻槸鍦ㄩ《灞傦紝涔熷氨鏄涓€灞傛笎鍙橈細background-size:100px100px灏嗘暣涓〉闈㈣鍓垚澶氫釜100pxx100px鐨勬鏂瑰舰鐢ㄨ娓愬彉瀹炵幇鐭╁舰鍥炬鍒╃敤涓婇潰鐨勬妧宸э紝鏍稿績background-position:-2.5px-10px鍦?00pxx100px鐨勬鏂瑰舰鐨勫洓涓涓婃樉绀虹煩褰㈠浘妗堛€傚彔鍔犵浜屽眰瑙掓笎鍙橈紝灏卞儚杩欐牱锛歞iv{background:conic-gradient(from270degat20px5px,#31c2ec90deg,transparent0deg),conic-gradient(from270degat5px20px,#31c2ec90deg,transparent0deg锛夛紝閲嶅绾挎€ф搴︼紙90deg锛?aec8ee0锛?aec8ee1px锛岄€忔槑1px锛岄€忔槑100px锛夛紝閲嶅绾挎€ф笎鍙橈紙#aec8ee0锛?aec8ee1px锛岄€忔槑1px锛岄€忔槑100px锛夛紝#0e284d锛涜儗鏅噸澶嶏細閲嶅锛岄噸澶嶏紝涓嶉噸澶嶏紝涓嶉噸澶嶏紱鑳屾櫙澶у皬锛?00px100px,100px100px,100%100%,100%100%;background-position:-10px-2.5px,-2.5px-10px,00,00;}杩欐牱灏卞畬缇庡疄鐜颁簡鎴戜滑闇€瑕佺殑鍥惧舰鏁堟灉锛氬畬鏁翠唬鐮侊紝鍙互鎴宠繖閲岋細CodePenDemo鈥斺€?ConicGradientSkillDemo缁间笂鎵€杩帮紝鏈枃浠嬬粛浜嗕娇鐢╟onic-gradient娓愬彉鐨勪綅缃殑灏忔妧宸э紝缁勫悎瀹炵幇浜嗙湅浼煎鏉傜殑缃戞牸甯冨眬妯″紡锛岀粓浜庡噯澶囧ソ浜嗭紝鏈枃鍒版缁撴潫锛屾垜甯屾湜杩欑瘒鏂囩珷瀵逛綘鏈夋墍甯姪锛氾級濡傛灉浣犳兂鑾峰緱鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇瓒ｉ椈馃槃鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛岃繖鏄笉鏂洿鏂扮殑銆傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>