涓€銆佽娉曠粏鑺傝涓嶄綇鎬庝箞鍔烇紵
瀹為檯寮€鍙戠殑鏃跺€欙紝褰撹浣跨敤radial-gradient寰勫悜娓愬彉鐨勬椂鍊欙紝鑴戜腑浼氭湁澶ф鐨勮娉曪紝浣嗘槸缁嗚妭鍗磋涓嶄綇锛屼簬鏄兂蹇嵎鎵句釜妗堜緥鐪嬬湅鍏蜂綋鎬庝箞鐢紝鐒跺悗鐩存帴濂椾竴涓嬨€傞€氬父涓€鐣悳绱紝浼氬彂鐜拌櫧鐒舵槸涓畝鍗曢渶姹傦紝浣嗘槸姝ｅソ婊¤冻杩欎釜闇€姹傜殑椤甸潰鍗翠笉濂芥壘锛屼贡绯熺碂鐨勩€侟/p>
涓嬫閬囧埌杩欑鍦烘櫙锛岀洿鎺ユ潵鏈珯鎼溾€滃緞鍚戞笎鍙樷€濓紝鎴栬€呯洿鎺ユ悳绱⑩€滄笎鍙樷€濓紝灏辨湁涓撻棬灞曠ずradial-gradient寰勫悜娓愬彉鍩烘湰璇硶浣跨敤妗堜緥鐨勬枃绔犮€傛枃绔犲叡灞曠ず浜?0渚嬪父瑙佷娇鐢ㄦ渚嬶紝鐩镐俊涓€瀹氬彲浠ヨ鐩栦綘鐨勪娇鐢ㄥ満鏅殑銆侟/p>
棣栧厛锛屽亣璁炬垜浠娇鐢ㄥ悓涓€娈礖TML浣滀负绀烘剰锛欬/p>
浜屻€佺ず渚?锛氭渶鍩虹鏈€绠€鍗曚娇鐢?/p>
CSS濡備笅锛欬/p>
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(yellow, red); }鏈€缁堟晥鏋滃涓嬪浘锛欬/p>
鍙锛屽浜庡緞鍚戞笎鍙橈紝鍦ㄤ笉鎸囧畾娓愬彉绫诲瀷浠ュ強浣嶇疆鐨勬儏鍐典笅锛屽叾娓愬彉璺濈鍜屼綅缃槸鐢卞鍣ㄧ殑灏哄鍐冲畾鐨勩€侟/p>
渚嬪鏈緥涔嬩腑锛屽鍣ㄧ殑瀹介珮姣旀槸2:1锛屾渶缁堟笎鍙樺憟鐜板嚭鏉ョ殑褰㈢姸涔熸槸涓€涓?:1鐨勬き鍦嗗舰锛屽苟涓旀笎鍙橀鑹茶嚜鍔ㄧ粓姝笌瀹瑰櫒鐨勮竟缂樸€侟/p>
鍘熺悊绀烘剰濡備笅锛欬/p>
涓夈€佺ず渚?锛氱畝鍗曠殑鍦嗗舰娓愬彉
CSS浠ｇ爜濡備笅锛欬/p>
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(circle, yellow, red); }鍏舵笎鍙樿寖鍥达紙娓愬彉缁撴潫绾匡級绀烘剰濡備笅鍥撅紝浼氬彂鐜版棦涓嶆槸鎸夌収瀹藉害鏉ョ殑锛屼篃涓嶆槸鎸夌収楂樺害鏉ョ殑锛屾槸鎸夌収鏈€杩滆竟瑙掕窛绂讳綔涓烘笎鍙樼粨鏉熺嚎鐨勶細
鍏舵笎鍙樿寖鍥达紙娓愬彉缁撴潫绾匡級绀烘剰濡備笅鍥撅紝浼氬彂鐜版棦涓嶆槸鎸夌収瀹藉害鏉ョ殑锛屼篃涓嶆槸鎸夌収楂樺害鏉ョ殑锛屾槸鎸夌収鏈€杩滆竟瑙掕窛绂讳綔涓烘笎鍙樼粨鏉熺嚎鐨勶細
瑕佽瘉鏄庝笂闈㈢粨璁烘瘮杈冪畝鍗曪紝鎴戜滑鍙互璁＄畻涓嬪瑙掔嚎涓€鍗婇暱搴︼紝涓猴細Math.sqrt(200200 + 400400) 鈮 223.6锛屼簬鏄紝鎴戜滑璁剧疆锛欬/p>
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(223.6px circle, yellow, red); }浼氬彂鐜帮紝鏈€缁堟晥鏋滃拰涓婇潰鐨勬晥鏋滄埅鍥惧嚑涔庡氨鏄竴妯′竴鏍风殑銆傝€?00px鐨勫崐寰勶細
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(200px circle, yellow, red); }鍙栬壊灏变細鍙戠幇杈圭紭棰滆壊宸紓杈冨ぇ锛岃鏄庨粯璁や笉鏄寜鐓ф渶鐭竟鏉ユ覆鏌撶殑銆侟/p>
鍥涖€佺ず渚?锛氭寚瀹氭笎鍙樿捣濮嬬偣浣嶇疆
璧峰鐐逛綅缃彲浠ラ€氳繃at鏉ユ寚瀹氾紝渚嬪锛欬/p>
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(circle at 50px 50px, yellow, red); }鏁堟灉濡備笅鍥炬墍绀猴細
濡傛灉甯屾湜娓愬彉鏄拰瀹瑰櫒淇濇寔涓€鑷存瘮渚嬬殑妞渾锛屽垯circle鍙互缂虹渷锛屼篃灏辨槸鐩存帴radial-gradient(at 50px 50px, yellow, red)涔熸槸鍙互鐨勩€侟/p>
50px 50px鎴戜滑涔熷彲浠ヤ娇鐢ㄧ櫨鍒嗘瘮鍊间唬鏇匡紝渚嬪锛欬/p>
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(circle at 12.5% 25%, yellow, red); }鏁堟灉鏄竴妯′竴鏍风殑銆侟/p>
浜斻€佺ず渚?锛氭寚瀹氭笎鍙樼粓姝㈢偣浣嶇疆
radial-gradient寰勫悜娓愬彉鏀寔4涓叧閿瓧鍙互鎸囧畾娓愬彉缁堟鐐逛綅缃紝瑙佷笅琛細
鏍规嵁涓婇潰鐨勭ず鎰忔晥鏋滃彲浠ョ湅鍑洪粯璁ゅ€兼槸farthest-corner銆侟/p>
鐜板湪锛屾垜浠CSS杩涜璋冩暣锛屽涓嬶細
.radial-gradient { width: 400px; height: 200px; background: radial-gradient(closest-side circle at 50px 50px, yellow, red); }涔熷氨鏄渾褰㈡笎鍙樼粓姝簬鏈€鐭竟锛岀粨鏋滄晥鏋滃涓嬪浘锛欬/p>
鍏€佺ず渚?锛氭寚瀹氭笎鍙橀鑹叉柇鐐更br />濡傛灉鎸囧畾澶氫釜棰滆壊锛屼絾鏈寚瀹氬叿浣撴柇鐐圭殑浣嶇疆锛屽垯杩欎簺棰滆壊浼氬潎鍖€鍒嗛厤0%~100%鐨勬笎鍙樺尯鍩燂紝渚嬪锛屼笅闈?鑹叉笎鍙橈細
.radial-gradient { width: 200px; height: 200px; border: 1px solid silver; background: radial-gradient(closest-side circle, yellow, orange, red, white); }缁撴灉濡備笅鍥炬墍绀猴細
浣嗕粠鑲夌溂瑙嗚鎴戜滑鏄湅涓嶅嚭鏄笉鏄潎鍖€鍒嗛厤娓愬彉鍖哄煙锛屼絾鏄垜浠彲浠ラ€氳繃鍏朵粬鏂瑰紡楠岃瘉鎴戜滑鐨勮鐐癸紝濡備笅鎸囧畾棰滆壊鏂偣浣嶇疆鐨凜SS锛欬/p>
.radial-gradient2 { width: 200px; height: 200px; border: 1px solid gray; background: radial-gradient(closest-side circle, yellow, orange 33.33%, red 66.666%, white); }鐢变簬娓愬彉棰滆壊榛樿绗竴涓鑹蹭綅缃槸0%锛屾渶鍚庝竴涓鑹蹭綅缃槸100%锛屽洜姝や笂闈ellow鍜寃hite鐨勬柇鐐逛綅缃彲浠ョ己鐪併€侟/p>
鐒跺悗鍙戠幇鏁堟灉鍜屼笂闈㈢殑鏄竴鑷寸殑锛欬/p>
鎸変笅绗竴涓湀鍦堟笎鍙橈紝浼氳鍚庨潰鐨勫湀鍦堢灛闂磋鐩栧湪涓婇潰銆傚鏋滀袱涓笎鍙橀鑹叉湁宸紓锛屾鏃惰倝鐪煎彲浠ユ劅瑙夊埌鏄庢樉鍙樺寲锛涗絾鏄疄闄呮搷浣滀笅鏉ワ紝灏卞ソ鍍忓悗闈㈡笎鍙樼獊鐒舵秷澶变竴鑸紝杩欏氨璇存槑涓婁笅涓や釜娓愬彉瀹為檯涓婃晥鏋滄槸涓€鑷寸殑銆侟/p>
涓冦€佺ず渚?锛氭き鍦嗙被鍨嬬殑寰勫悜娓愬彉
瀵逛簬鍦嗗舰鐣岄潰锛屾垜浠彧闇€瑕佹寚瀹氫竴涓崐寰勫氨鍙互浜嗭紝浣嗘槸瀵逛簬妞渾绫诲瀷鐨勫緞鍚戞笎鍙橈紝鎴戜滑闇€瑕佸悓鏃舵寚瀹氭í杞村拰绾佃酱鐨勯暱搴︼紝渚嬪锛欬/p>
.radial-gradient { width: 200px; height: 200px; background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red); }50px 100px ellipse涓涓€涓暟鍊?0px琛ㄧず妯酱鍗婂緞锛?00px琛ㄧず绾佃酱鍗婂緞锛屼簬鏄繖娈佃鍙ヨ〃绀虹粯鍒朵竴涓暱搴?00px楂樺害200px鐨勬き鍦嗐€侟/p>
鏁堟灉濡備笅鍥撅細
闇€瑕佹敞鎰忕殑鏄紝鍦ㄤ笂闈㈢ず鎰廋SS浠ｇ爜涓紝閫忔槑鍒懊椕椕楀垎鐣岄偅閲屾湁涓€涓?px鐨勫亸宸繃娓★紝涔熷氨鏄痶ransparent 40px, yellow 41px涓瓂ellow鏄?1px锛岃€屼笉鏄缃殑40px锛屽師鍥犲湪浜庡湪Chrome涓嬶紝濡傛灉棰滆壊鐩存帴0鍋忓樊杩囨浮锛屼細鏈夋瘮杈冧弗閲嶇殑閿娇锛岀被浼间笅鍥捐繖鏍凤紙鑳屾櫙鑹茶涓?333锛夛細
閫氳繃鏈?鍍忕礌鎴栬€呭崐鍍忕礌鐨勮繃娓＄紦鍐插彲浠ユ湁鏁堥伩鍏嶉敮榻跨殑鍑虹幇銆侟/p>
鍏€佺ず渚?锛氬彲绱姞鐨勫緞鍚戞笎鍙樿儗鏅浘
鎴戜滑鍙互鎶婂涓緞鍚戞笎鍙樼疮鍔犲湪涓€璧峰疄鐜版煇浜涙晥鏋滐紝渚嬪涓嬮潰CSS锛欬/p>
.radial-gradient { width: 200px; height: 200px; background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px), radial-gradient(30px circle, red, red 29px, transparent 30px); }瀹炵幇浜嗏€滈偑鐜嬬湡鐪尖€濇晥鏋滐細
涔濄€佺ず渚?锛氭笎鍙樿儗鏅殑灏哄鎺у埗
閰嶅悎background-size鐨勫昂瀵告帶鍒跺拰鑳屾櫙閲嶅鐗规€э紝鎴戜滑鍙互瀹炵幇娓愬彉寮忕殑澶嶆潅绾圭悊鏁堟灉锛欬/p>
.radial-gradient { width: 200px; height: 200px; background: radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px), radial-gradient(3px circle, red, red 3px, transparent 4px); background-size: 25px; } 浜庢槸灏卞彲浠ョ湅鍒颁竴澶ф尝鍐欒疆鐪硷細
閫氬父鎴戜滑浣跨敤寰勫悜娓愬彉鏋勫缓涓€浜涚畝鍗曞疄鐢ㄥ浘褰㈢殑鏃跺€欙紝background-size寰€寰€鏄叧閿睘鎬э紝渚嬪锛屾垜浠瀹炵幇涓按娉㈡晥鏋滐紝鍙互杩欐牱锛欬/p>
.radial-gradient { width: 200px; height: 100px; background: red; position: relative; } .radial-gradient:after { content: ''; position: absolute; height: 10px; left:0 ; right: 0; bottom: -10px; background: radial-gradient(20px 15px ellipse at top, red 10px, transparent 11px); background-size: 20px 10px; }鐒跺悗灏辨湁涓嬪浘鎵€绀虹殑鏁堟灉锛欬br />
鍗併€佺ず渚?锛氬彲閲嶅鐨勫緞鍚戞笎鍙楛br />濡傛灉鎯宠瀹炵幇鍙噸澶嶇殑寰勫悜娓愬彉锛屼害鍙互浣跨敤鍘熺敓鐨剅epeating-radial-gradient()鏂规硶锛岀壒鍒€傚悎瀹炵幇浠庝腑蹇冩墿鏁ｇ殑鍏夋尝鏁堟灉銆侟/p>
鐒惰€岋紝鐩告瘮閲嶅绾挎€ф笎鍙榬epeating-linear-gradient()鏂规硶锛宺epeating-radial-gradient()鐨勫疄闄呭簲鐢ㄥ満鏅疄闄呬笂寰堟湁闄愩€傚洜涓猴紝瀹為檯寮€鍙戠殑鏃跺€欙紝鎴戜滑寰堝皯鐢ㄥ埌浠庝腑蹇冩墿鏁ｇ殑鍏夋尝鏁堟灉銆侟/p>
闄や簡涓€浜涙湰韬氨鏄尝绾圭被鍨嬫晥鏋滐紝濡傛按娉紝澹版尝鎴栬€呭敱鐗囩汗鐞嗭細
濡備笅CSS
.radial-gradient { position: relative; width: 262px; height: 262px; border-radius: 50%; background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px); background-size: 50% 100%, 100% 50%, 100% 100%; } .radial-gradient:after { position: absolute; top: 50%; left: 50%; margin: -35px; border: solid 1px #d9a388; width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33; background: #b5ac9a; content: ''; }鍗佷竴銆佺ず渚?0锛氫綔涓篵order-image鐨勫緞鍚戞笎鍙楛br />寰勫悜娓愬彉涓嶄粎鍙互浣滀负background鐨勮儗鏅浘锛岃繕鍙互浣滀负border-image鐨勮竟妗嗗浘浣跨敤銆侟/p>
渚嬪锛欬/p>
.radial-gradient { width: 100px; height: 100px; border: 50px solid; border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch; } 澶╃劧闀傜┖鏁堟灉锛屽彧鍙儨border-image鏄棤娉曞拰border-radius鍚屾椂鐢熸晥鐨勶紝鍚﹀垯锛宐order-image鍙氨瑕佺墰鐐稿ぉ浜嗐€侟/p>