娣卞叆鐞嗚Вcss3-gradient鏂滃悜绾挎€ф笎鍙
聽
娣卞叆鐞嗚ВCSS3 gradient鏂滃悜绾挎€ф笎鍙?/h2>
by聽zhangxinxu聽from聽http://www.zhangxinxu.com
鏈枃鍦板潃锛?a style="color: #34538b;" href="http://www.zhangxinxu.com/wordpress/?p=3639">http://www.zhangxinxu.com/wordpress/?p=3639
涓€銆侀棶棰樻病鏈夋兂寰楅偅涔堢畝鍗?/h3>
鎻愰棶锛屼娇鐢–SS3 gradient娓愬彉锛屽湪涓€涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">400*300鐨?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">div灞備笂瀹炵幇涓€涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(100px, 100px)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(200px, 200px)鐢辩孩鍒伴粍鐨勬枩鍚戠嚎鎬ф笎鍙橈紝璇ュ浣曞疄鐜帮紵
//zxx: 杩欓噷鐨勮璁篊SS3娓愬彉閮芥槸鍩轰簬鏂板紡瑙勮寖鍐欐硶锛屼笖蹇界暐绉佹湁鍓嶇紑
鎴戜滑鍙兘鐭ラ亾姘村钩娓愬彉鐨勫疄鐜帮紝绫讳技杩欐牱锛?/p>
{background-image:linear-gradient(left, red 100px, yellow 200px);}
鏁堟灉鍙兘杩戜技杩欐牱锛?/p>
聽
寰堣嚜鐒剁殑锛岄偅浠?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(100px, 100px)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(200px, 200px)搴旇灏辨槸浠庡乏涓婅寮€濮嬶紝搴旇鏄繖鏍峰瓙锛?/p>
{background-image:linear-gradient(left top, red 100px, yellow 200px);}
鏁堟灉鍙兘杩戜技杩欐牱锛?/p>
聽
鍝囧摝锛屽竻姘旓紝鎭╋紝搴旇灏辨槸鎴戜滑鎯宠鐨勬晥鏋滀簡锛佲€斺€?/p>
杩欐樉鐒舵槸涓嶅彲鑳界殑锛屽鏋滅湡杩欎箞绠€鍗曪紝鎴戜篃涓嶄細鎷垮嚭鏉ヨ浜唦
鎴戜滑鎵撳紑Photoshop绛夌粯鍥捐蒋浠讹紝鐢讳竴涓鍚堜笂闈㈣姹傜殑娓愬彉锛岀湅鐪嬫晥鏋滄槸锛?br>
涓庝笂闈㈢殑CSS瀹炵幇瀵规瘮涓€涓嬶細
聽
绾㈣壊鍖哄煙澶у皬鏄庢樉宸緢澶氾紝鎬庝箞鍥炰簨锛?/p>
鎴戝彧鑳藉憡璇変綘锛屼簨鎯呰繙娌℃湁浣犳兂鐨勯偅涔堢畝鍗曪紒
浜屻€佸姩鐢ㄦ噿鎯扮殑鎱㈡€濈淮锛屼粠澶村紑濮?/h3>
鎴戜滑閬囧埌闂锛屽鏋滅涓€鍙嶅簲鏄眰鍔╁埆浜猴紝get鐨勬槸琛ㄥ眰鐨勪笢瑗匡紱濡傛灉鑷繁娣卞叆鍒嗘瀽锛実et鐨勫線寰€鏄疄鍦ㄧ殑涓滆タ銆傜涓€绉嶄汉鐪嬩技濂藉锛屽疄闄呮槸涓噿鎯扮殑浜猴紝鍕ゅ揩鍦颁娇鐢ㄨ交鏉俱€佽€楄垂绮惧姏杈冨皯鐨勫揩鎬濈淮锛岃繖绉嶄汉閫傚悎鍋氶攢鍞€佸叕鍏筹紝骞朵笉閫傚悎鍋氭妧鏈紱浣嗗苟涓嶈〃绀轰粬璧氱殑绁ㄥ瓙浼氬皯銆?/p>
棰樺璇濈偣鍒颁负姝€傛繁鍚镐竴鍙ｆ皵锛屾潵锛屽惛鈥︹€︹€︹€﹀ソ锛岀幇鍦ㄦ垜浠噸鏂板瑙咰SS3 gradient绾挎€ф笎鍙樼殑鏍囧噯鍐欐硶锛堝洜webkit涓嶆敮鎸侊紝杩欓噷鐪佺暐浜?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">to锛夛細
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
涓婇潰杩欑CSS璇硶鎴戜滑缁忓父瑙佸埌锛屽彲鑳芥湁浜虹湅涓嶆噦鍏蜂綋鐨勬剰鎬濓紝鍏跺疄涓婇潰鐨勪簺绗﹀彿鍚箟涓庢鍒欒〃杈惧紡鏈夊緢澶氫竴鑷翠箣澶勶細
-
[]鍦ㄦ鍒欎腑琛ㄧず涓€涓瓧绗︾被锛岃繖閲岋紝浣犲彲浠ョ悊瑙ｄ负涓€涓皬鍗曞厓銆?/li>
-
|琛ㄧず鍊欓€夈€備篃灏辨槸鈥滄垨鑰呪€濈殑鎰忔€濓紝瑕佷箞鍓嶉潰鐨勶紝瑕佷箞灏卞悗闈㈢殑銆?/li>
-
?涓洪噺璇嶏紝琛ㄧず0涓垨1涓紝瑷€澶栦箣鎰忓氨鏄紝浣犲彲浠ヤ笉鎸囧畾鏂瑰悜锛岀洿鎺ユ笎鍙樿壊璧拌捣銆備緥濡傦細
background:linear-gradient(red, yellow);
灏辨槸浠庝笂寰€涓嬬殑绾㈤粍鏉＄汗鏁堟灉銆?/p>
-
+涔熸槸閲忚瘝锛岃〃绀?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">1涓垨鑰呮洿澶氫釜銆傚洜姝わ紝缁堟棰滆壊鏄笉鍙己灏戠殑銆備緥濡傦細linear-gradient(red)鏄叡娌瑰懡锛岀櫧鏉裤€?/li>
-
<>涓殑鏄叧閿瓧锛屼富瑕佹槸璁╁紑鍙戜汉鍛樼煡閬撹繖閲屽簲璇ユ斁浜涗粈涔堝唴瀹广€?/li>
绾挎€ф笎鍙樺叧閿瓧
1. angle
angle琛ㄧず娓愬彉鐨勮搴︼紝鐒惰€岋紝杩欎釜瑙掑害鍙樺寲鍗冧竾涓嶈兘鎯冲綋鐒剁悊瑙ｏ紝涓句釜渚嬪瓙锛?br>濡傛灉angle鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">45deg, 杩樻槸鐢辩孩鍒伴粍鐨勬笎鍙橈紝涓嬮潰閭ｄ釜鍥炬槸姝ｇ‘鐨勮〃鐜帮細
鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">A鍛㈣繕鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">B鍛㈣繕鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">C鍛㈣繕鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">D鍛紵
杩欎釜瑕佹瘮濂冲弸鎷跨潃鍥涗欢琛ｆ湇璁╀綘璇村摢涓ソ鐪嬭绠€鍗曞惂銆?/p>
5绉掗挓鍊掕鏃讹紝5, 4, 3, 2, 1, 鈥︹€?/p>
濂戒簡锛岀瓟妗堟槸锛?strong style="color: #cd0000;">C
浜茬埍鐨勬湅鍙嬶紝鍥炵瓟姝ｇ‘浜嗘湪鏈夛紵
鎴戜繚璇侊紝寰堝浜洪兘鍥炵瓟閿欎簡锛堝寘鎷垜鑷繁锛夛紝涓轰粈涔堜細鐘敊锛熷師鍥犲緢绠€鍗曪紝鈥滅啛鎮夋劅鏁堝簲鈥濄€?/p>
鎯宠浜轰滑鐩镐俊璋鏈変釜鍙潬鐨勬柟娉曪紝閭ｅ氨鏄笉鏂噸澶嶏紝鍥犱负浜轰滑寰堥毦瀵圭啛鎮夋劅鍜岀湡鐩稿姞浠ュ尯鍒€傗€斺€斾腹灏煎皵路鍗″凹鏇?/p>
鎴戜滑锛岃濡傛垜锛岄潪甯稿娆″湴鎺ヨЕCSS3聽transform涓殑鏃嬭浆锛?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">rotate(45deg)鏁堟灉灏辨槸鍏冪礌榛樿鎬侀『鏃堕拡鏃嬭浆45掳锛涗簬鏄紝杩欑鐔熸倝鎰熶細璁╂垜浠寰楁笎鍙樼殑鏃嬭浆涔熷簲璇ュ姝ゃ€傞粯璁ゆ笎鍙樹粠涓婂埌涓嬶紝閭ｄ箞鏃嬭浆45掳搴旇鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">D鍟婏紙鍙傝涓媑if绀烘剰锛夛紝鎬庝箞浼氭槸C鍛紵
photoshop涓嶤SS3璧板緱瓒婃潵瓒婅繎浜嗭紝鎴戜滑鍙互浠巔hotoshop涓壘鍒扮瓟妗堛€?/p>
浠庝笂鍥鹃偅涓湀涓殑鍦嗙幆鍙互鐪嬪嚭锛屾笎鍙樼殑瑙掑害涓庢棆杞殑閭ｄ釜瑙掑害瀹屽叏涓嶆槸涓€鍥炰簨銆傜嚎鎬ф笎鍙樼殑杩欎釜瑙掑害涓哄渾蹇冧负璧风偣鐨勫彂鏁ｆ柟鍚戙€傚ぇ鍥剧ず鎰忓氨鏄細
2. side-or-corner
side-or-corner涓枃鎰忔€濆氨鏄€滆竟鎴栬鈥濓紝鍙€夊€兼湁锛?/p>
[left | right] || [top | bottom]
琛ㄧず锛屼綘鍙互鏈夊涓嬬殑鍐欐硶鎴栫粍鍚堬細
left,聽right,聽top,聽bottom,聽left top,聽left bottom,聽right top,聽right bottom. 鍒嗗埆琛ㄧず锛屼粠宸﹀線鍙筹紝浠庡彸寰€宸︼紝浠庝笂寰€涓嬶紝浠庝笅寰€涓婏紝浠庡乏涓婂線鍙充笅锛屼粠鈥︹€︼紙閮芥噦鐨勶紝涓嶅叏鍐欎簡锛?/p>
鍏朵腑鐨?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">left top(浠庡乏涓婂線鍙充笅)姝ｅソ鎴戜滑涓€寮€濮嬬殑渚嬪瓙浣跨敤浜嗭紝鐜板湪鐪嬬湅锛岀◢寰兂鎯筹紝灏辩煡閬撴垜浠娇鐢ㄩ敊浜嗭紒
鏄剧劧锛屼粠(100,100)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(300,300)鏄釜45搴﹀€嶆暟瑙掞紱鑰?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">left top鐨勮搴︽槸鐩村鍙充笅瑙掔殑锛岃€屽鍣ㄦ槸400*300锛屾樉鐒讹紝涓嶆槸45搴﹀€嶆暟瑙掋€傛牴鎹垜浠笂闈㈠angle鐨勮璇嗭紝瑙掑害搴旇鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">-45掳锛?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">-45掳涓哄渾蹇冪綉鍙充笅鏂瑰悜45搴︾殑涓€鏉＄嚎锛屾濂界鍚堜粠(100,100)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(300,300)鐨勬柟鍚戯紒
3. color-stop
娓愬彉鍏抽敭棰滆壊缁撶偣锛岃娉曚负锛?/p>
<color> [ <percentage> | <length> ]
涓枃瑙ｉ噴灏辨槸锛岄鑹插€?绌烘牸+鐧惧垎姣旀垨闀垮害鍊笺€備緥濡?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">red 100px. 璁颁綇锛岃繖閲岀殑棰滆壊鍊煎彧鑳戒竴涓紝鍥犳锛屄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">red 100px 100px鏄畬鍏ㄩ敊璇淮锛?/p>
OK锛岀幇鍦ㄦ垜浠畾涔夐噸鏂版⒊鐞嗕簡涓€閬嶏紝鐜板湪瀹炵幇涓€寮€濮嬬殑娓愬彉鏁堟灉搴旇OK浜嗗惂锛岃瘯璇曞憲~
濡備笅CSS锛?/p>
{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}
濡備笅鏁堟灉锛?/p>
聽
鑲夌溂鐪嬩笂鍘诲ソ鍍忛偅涔堝洖浜嬶紝鎴戜滑鏉ュ姣斾笅photoshop涓殑姝ｇ‘瀹炵幇锛?br>
棰潂聽
聽璨屼技杩樻槸涓嶅鍟婏紝鑰屼笖宸緱鏇磋繙浜嗭紝鎬庝箞鍥炰簨锛燂紵锛?/p>
鎴戝彧鑳藉憡璇変綘锛屼簨鎯呰繙娌℃湁浣犳兂鐨勯偅涔堢畝鍗曪紒
涓夈€佹繁鍏ョ悊瑙ｇ嚎鎬ф笎鍙樼殑瑙掑害鍧愭爣
涓婇潰鐨勪唬鐮佹垜浠◢寰慨鏀逛笅锛屽姞涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">-webkit鍓嶇紑浠ュ強-moz鍓嶇紑鐪嬬湅锛?/p>
{background-image:-webkit-linear-gradient(-45deg, red 100px, yellow 200px);}
濡備笅鏁堟灉锛堥潪webkit鍐呮牳鎴浘锛夛細
聽
鍝庡憖锛岃矊浼艰搴﹀浜嗗槢锛佸拫鍥炰簨銆?/p>
杩欐槸Chrome娴忚鍣ㄤ笅鐨勪竴涓钁╅棶棰橈紝鏈€杩戯紝Chrome娴忚鍣ㄥ凡缁忓幓鎺変簡CSS3娓愬彉鐨勭鏈夊墠缂€锛屼絾鏄紝鍏朵腑鐨勮В鏋愪篃鏈変簡鍐欏彉鍖栵細
background-image:-webkit-linear-gradient(-45deg, red, yellow)
涓?/p>
background-image:linear-gradient(-45deg, red, yellow)
鍦–hrome娴忚鍣ㄤ笅鐨勬笎鍙樻柟鍚戝眳鐒舵槸鐩稿弽鐨勶紒45deg鏄甯哥殑銆?/p>
Firefox娴忚鍣ㄤ笅涔熸槸濡傛锛屾湁鍓嶇紑鍜屾病鏈夊墠缂€鏂瑰悜鐩稿弽锛佸拫鍥炰簨锛?/p>
鍘熷洜寰堢畝鍗曪紝CSS3鐩墠杩樻槸鑽夋闃舵锛?/p>
浠庢祻瑙堝櫒鍘绘帀鍓嶇紑鍓嶅悗鐨勫彉鍖栧彲浠ユ帹娴嬶紝涔嬪墠锛學3C鐨勬笎鍙樺潗鏍囨槸涓巔hotoshop涓竴鑷寸殑锛屼絾鏄紝鍚庢潵锛岀敱浜庢煇浜涘師鍥狅紝淇敼浜嗐€?/p>
鑷充簬浠€涔堝師鍥狅紝鏍规嵁鎴戣崏鑽夌殑鏌ユ壘锛屽彲鑳戒笌涓嬮潰鍑犱釜鍏抽敭瀛椾箣涓€鏈夎仈绯伙細animation/transition鍔ㄧ敾銆?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">write-mode涔﹀啓鏂瑰悜銆?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">flex box妯″瀷銆佷互鍙?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">radial-gradient娓愬彉绛夈€?/p>
鐩墠鐨?a style="color: #34538b;" href="http://dev.w3.org/csswg/css-images-3/#linear-gradients">瑙勮寖鏄繖涔堣鐨勶細
using angles
For the purpose of this argument, 鈥?deg鈥?points upward, and positive angles represent clockwise rotation, so 鈥?0deg鈥?point toward the right.
涔熷氨鏄細
浣跨敤angles
鍙傛暟閲婁箟濡備笅锛屸€?deg鈥欐寚鍚戜笂闈紝鍚屾椂姝ｈ搴﹂『鏃堕拡鏃嬭浆锛屽洜姝も€?0deg鈥欐寚鍚戝彸杈广€?/p>
鎴戜滑鐢讳竴涓嬪氨鏄細
鍙锛岀洰鍓嶏紝瑙勮寖鐨勬笎鍙樺潗鏍囩郴涓巔hotoshop鏄湁宸紓鐨勩€?/p>
鍚屾椂锛屼篃鍛婅鎴戜滑锛岀鏈夊墠缂€鍙笉鑳戒贡鐢ㄥ摝锛?/p>
闈㈠悜鏈潵锛屾樉鐒舵垜浠兘瑕佽窡鐫€瑙勮寖璧帮紝浜庢槸鏈塁SS锛?/p>
{background-image:linear-gradient(135deg, red 100px, yellow 200px);}
鏁堟灉涓猴細
聽
涓嶱S鍥炬瘮涓€涓嬶細
鎴戝幓~鎬庝箞杩樻槸鏈夊嚭鍏ュ晩锛熲€斺€旂孩鑹插尯鍩熷ぇ灏忔槑鏄句笉涓€鏍峰槢锛?/p>
鎴戝彧鑳藉憡璇変綘锛屼簨鎯呰繙娌℃湁浣犳兂鐨勯偅涔堢畝鍗曪紒
鍥涖€佹繁鍏ョ悊瑙ｈ搴﹀潗鏍囦笌浣嶇疆鍏崇郴
瀵逛簬鏂滃悜绾挎€ф笎鍙橈紝鐐瑰埌鐐圭殑娓愬彉鍙笉鏄洿鎺ユ妸鐐圭殑妯潗鏍囨斁涓婂幓灏卞彲浠ョ殑銆傚洜涓哄綋娓愬彉鍊炬枩鐨勬椂鍊欙紝娓愬彉鐨勮捣姝㈢偣鐨勫潗鏍囦篃鍙戠敓鍙樺寲浜嗐€備笅鍥炬槸瀹樻柟瑙勮寖鐨勪竴寮犵ず鎰忓浘锛屾紨绀虹殑鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">45deg娓愬彉鐨勮捣姝㈢偣浠ュ強鏂瑰悜銆?/p>
璁颁綇涓€涓叧閿偣锛屾笎鍙樼殑璧风偣鍜岀粓鐐癸紙榛樿锛夊湪杩囦腑蹇冪殑娓愬彉绾跨殑鍨傜洿绾夸笂锛屼簬鏄紝鎴戜滑灏卞彲浠ョ‘瀹氳捣鐐逛笌缁堢偣鐨勪綅缃簡銆傛寜鐓ц繖涓悊瑙ｏ紝鎴戜滑灏卞彲浠ョ敾鍑?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">400*300聽div涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">135deg璧峰鐐瑰湪鍝噷锛岀劧鍚庡啀纭畾(100,100)鍜?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(200,200)鐨勪綅缃氨杞绘澗澶氫簡銆?/p>
濡備笅绀烘剰鍥撅細
涓€鍥鹃《鍓嶈█锛屽弽姝ｄ笂闈㈣繖寮犲浘鎴戞槸鐪嬫噦浜嗐€備簬鏄紝鎴戜滑鐨勫潗鏍囪捣姝㈢偣鍊煎叾瀹炲氨鍙樻垚浜嗭紝榛戣壊鎷姬鐨勯暱搴︿互鍙婄传鑹叉嫭寮х殑闀垮害鍊煎垎鍒灏戯紒
铏界劧寰堝浜轰笉鍠滄鏁板锛屼絾鏄嚑浣曞簲璇ラ兘杩樹笉閿欙紝鎴戜滑鏉ヤ竴璧风畻涓€涓嬧€︹€?/p>
//zxx: 闀垮害璁＄畻涓€︹€?/span>
缁撴灉涓猴紝璧风偣锛?/p>
100 * Math.sqrt(2) = 141.4213562373095;
缁堢偣涓猴細
200 * Math.sqrt(2) = 282.842712474619;
CSS鐢ㄤ笂锛?/p>
{background-image:linear-gradient(135deg, red 141.4213562373095px, yellow 282.842712474619px);}
鏁堟灉锛?/p>
聽
涓嶱S鐨勬晥鏋滄瘮瀵逛笅锛?br>
鍝囧摝锛屼竴鏍蜂簡鍞夛紒榧撴帉锛?br>
浜斻€佺粨鏉熻
濂藉ソ瀛︿範锛屽ぉ澶╁悜涓婏紒
鍘熷垱鏂囩珷锛岃浆杞借娉ㄦ槑鏉ヨ嚜寮犻懌鏃?閼┖闂?閼敓娲?/a>[http://www.zhangxinxu.com]
鏈枃鍦板潃锛?a style="color: #34538b;" href="http://www.zhangxinxu.com/wordpress/?p=3639">http://www.zhangxinxu.com/wordpress/?p=3639
锛堟湰绡囧畬锛?/p>
by聽zhangxinxu聽from聽http://www.zhangxinxu.com
鏈枃鍦板潃锛?a style="color: #34538b;" href="http://www.zhangxinxu.com/wordpress/?p=3639">http://www.zhangxinxu.com/wordpress/?p=3639
涓€銆侀棶棰樻病鏈夋兂寰楅偅涔堢畝鍗?/h3>
鎻愰棶锛屼娇鐢–SS3 gradient娓愬彉锛屽湪涓€涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">400*300鐨?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">div灞備笂瀹炵幇涓€涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(100px, 100px)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(200px, 200px)鐢辩孩鍒伴粍鐨勬枩鍚戠嚎鎬ф笎鍙橈紝璇ュ浣曞疄鐜帮紵
//zxx: 杩欓噷鐨勮璁篊SS3娓愬彉閮芥槸鍩轰簬鏂板紡瑙勮寖鍐欐硶锛屼笖蹇界暐绉佹湁鍓嶇紑
鎴戜滑鍙兘鐭ラ亾姘村钩娓愬彉鐨勫疄鐜帮紝绫讳技杩欐牱锛?/p>
{background-image:linear-gradient(left, red 100px, yellow 200px);}
鏁堟灉鍙兘杩戜技杩欐牱锛?/p>
寰堣嚜鐒剁殑锛岄偅浠?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(100px, 100px)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(200px, 200px)搴旇灏辨槸浠庡乏涓婅寮€濮嬶紝搴旇鏄繖鏍峰瓙锛?/p>
{background-image:linear-gradient(left top, red 100px, yellow 200px);}
鏁堟灉鍙兘杩戜技杩欐牱锛?/p>
鍝囧摝锛屽竻姘旓紝鎭╋紝搴旇灏辨槸鎴戜滑鎯宠鐨勬晥鏋滀簡锛佲€斺€?/p>
杩欐樉鐒舵槸涓嶅彲鑳界殑锛屽鏋滅湡杩欎箞绠€鍗曪紝鎴戜篃涓嶄細鎷垮嚭鏉ヨ浜唦
鎴戜滑鎵撳紑Photoshop绛夌粯鍥捐蒋浠讹紝鐢讳竴涓鍚堜笂闈㈣姹傜殑娓愬彉锛岀湅鐪嬫晥鏋滄槸锛?br>
涓庝笂闈㈢殑CSS瀹炵幇瀵规瘮涓€涓嬶細
绾㈣壊鍖哄煙澶у皬鏄庢樉宸緢澶氾紝鎬庝箞鍥炰簨锛?/p>
鎴戝彧鑳藉憡璇変綘锛屼簨鎯呰繙娌℃湁浣犳兂鐨勯偅涔堢畝鍗曪紒
浜屻€佸姩鐢ㄦ噿鎯扮殑鎱㈡€濈淮锛屼粠澶村紑濮?/h3>
鎴戜滑閬囧埌闂锛屽鏋滅涓€鍙嶅簲鏄眰鍔╁埆浜猴紝get鐨勬槸琛ㄥ眰鐨勪笢瑗匡紱濡傛灉鑷繁娣卞叆鍒嗘瀽锛実et鐨勫線寰€鏄疄鍦ㄧ殑涓滆タ銆傜涓€绉嶄汉鐪嬩技濂藉锛屽疄闄呮槸涓噿鎯扮殑浜猴紝鍕ゅ揩鍦颁娇鐢ㄨ交鏉俱€佽€楄垂绮惧姏杈冨皯鐨勫揩鎬濈淮锛岃繖绉嶄汉閫傚悎鍋氶攢鍞€佸叕鍏筹紝骞朵笉閫傚悎鍋氭妧鏈紱浣嗗苟涓嶈〃绀轰粬璧氱殑绁ㄥ瓙浼氬皯銆?/p>
棰樺璇濈偣鍒颁负姝€傛繁鍚镐竴鍙ｆ皵锛屾潵锛屽惛鈥︹€︹€︹€﹀ソ锛岀幇鍦ㄦ垜浠噸鏂板瑙咰SS3 gradient绾挎€ф笎鍙樼殑鏍囧噯鍐欐硶锛堝洜webkit涓嶆敮鎸侊紝杩欓噷鐪佺暐浜?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">to锛夛細
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
涓婇潰杩欑CSS璇硶鎴戜滑缁忓父瑙佸埌锛屽彲鑳芥湁浜虹湅涓嶆噦鍏蜂綋鐨勬剰鎬濓紝鍏跺疄涓婇潰鐨勪簺绗﹀彿鍚箟涓庢鍒欒〃杈惧紡鏈夊緢澶氫竴鑷翠箣澶勶細
-
[]鍦ㄦ鍒欎腑琛ㄧず涓€涓瓧绗︾被锛岃繖閲岋紝浣犲彲浠ョ悊瑙ｄ负涓€涓皬鍗曞厓銆?/li> -
|琛ㄧず鍊欓€夈€備篃灏辨槸鈥滄垨鑰呪€濈殑鎰忔€濓紝瑕佷箞鍓嶉潰鐨勶紝瑕佷箞灏卞悗闈㈢殑銆?/li> -
?涓洪噺璇嶏紝琛ㄧず0涓垨1涓紝瑷€澶栦箣鎰忓氨鏄紝浣犲彲浠ヤ笉鎸囧畾鏂瑰悜锛岀洿鎺ユ笎鍙樿壊璧拌捣銆備緥濡傦細background:linear-gradient(red, yellow);
灏辨槸浠庝笂寰€涓嬬殑绾㈤粍鏉＄汗鏁堟灉銆?/p>
-
+涔熸槸閲忚瘝锛岃〃绀?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">1涓垨鑰呮洿澶氫釜銆傚洜姝わ紝缁堟棰滆壊鏄笉鍙己灏戠殑銆備緥濡傦細linear-gradient(red)鏄叡娌瑰懡锛岀櫧鏉裤€?/li> -
<>涓殑鏄叧閿瓧锛屼富瑕佹槸璁╁紑鍙戜汉鍛樼煡閬撹繖閲屽簲璇ユ斁浜涗粈涔堝唴瀹广€?/li>
绾挎€ф笎鍙樺叧閿瓧
1. angleangle琛ㄧず娓愬彉鐨勮搴︼紝鐒惰€岋紝杩欎釜瑙掑害鍙樺寲鍗冧竾涓嶈兘鎯冲綋鐒剁悊瑙ｏ紝涓句釜渚嬪瓙锛?br>濡傛灉angle鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">45deg, 杩樻槸鐢辩孩鍒伴粍鐨勬笎鍙橈紝涓嬮潰閭ｄ釜鍥炬槸姝ｇ‘鐨勮〃鐜帮細
鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">A鍛㈣繕鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">B鍛㈣繕鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">C鍛㈣繕鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">D鍛紵
杩欎釜瑕佹瘮濂冲弸鎷跨潃鍥涗欢琛ｆ湇璁╀綘璇村摢涓ソ鐪嬭绠€鍗曞惂銆?/p>
5绉掗挓鍊掕鏃讹紝5, 4, 3, 2, 1, 鈥︹€?/p>
濂戒簡锛岀瓟妗堟槸锛?strong style="color: #cd0000;">C
浜茬埍鐨勬湅鍙嬶紝鍥炵瓟姝ｇ‘浜嗘湪鏈夛紵
鎴戜繚璇侊紝寰堝浜洪兘鍥炵瓟閿欎簡锛堝寘鎷垜鑷繁锛夛紝涓轰粈涔堜細鐘敊锛熷師鍥犲緢绠€鍗曪紝鈥滅啛鎮夋劅鏁堝簲鈥濄€?/p>
鎯宠浜轰滑鐩镐俊璋鏈変釜鍙潬鐨勬柟娉曪紝閭ｅ氨鏄笉鏂噸澶嶏紝鍥犱负浜轰滑寰堥毦瀵圭啛鎮夋劅鍜岀湡鐩稿姞浠ュ尯鍒€傗€斺€斾腹灏煎皵路鍗″凹鏇?/p>
鎴戜滑锛岃濡傛垜锛岄潪甯稿娆″湴鎺ヨЕCSS3聽transform涓殑鏃嬭浆锛?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">rotate(45deg)鏁堟灉灏辨槸鍏冪礌榛樿鎬侀『鏃堕拡鏃嬭浆45掳锛涗簬鏄紝杩欑鐔熸倝鎰熶細璁╂垜浠寰楁笎鍙樼殑鏃嬭浆涔熷簲璇ュ姝ゃ€傞粯璁ゆ笎鍙樹粠涓婂埌涓嬶紝閭ｄ箞鏃嬭浆45掳搴旇鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">D鍟婏紙鍙傝涓媑if绀烘剰锛夛紝鎬庝箞浼氭槸C鍛紵
photoshop涓嶤SS3璧板緱瓒婃潵瓒婅繎浜嗭紝鎴戜滑鍙互浠巔hotoshop涓壘鍒扮瓟妗堛€?/p>
浠庝笂鍥鹃偅涓湀涓殑鍦嗙幆鍙互鐪嬪嚭锛屾笎鍙樼殑瑙掑害涓庢棆杞殑閭ｄ釜瑙掑害瀹屽叏涓嶆槸涓€鍥炰簨銆傜嚎鎬ф笎鍙樼殑杩欎釜瑙掑害涓哄渾蹇冧负璧风偣鐨勫彂鏁ｆ柟鍚戙€傚ぇ鍥剧ず鎰忓氨鏄細
2. side-or-cornerside-or-corner涓枃鎰忔€濆氨鏄€滆竟鎴栬鈥濓紝鍙€夊€兼湁锛?/p>
[left | right] || [top | bottom]
琛ㄧず锛屼綘鍙互鏈夊涓嬬殑鍐欐硶鎴栫粍鍚堬細left,聽right,聽top,聽bottom,聽left top,聽left bottom,聽right top,聽right bottom. 鍒嗗埆琛ㄧず锛屼粠宸﹀線鍙筹紝浠庡彸寰€宸︼紝浠庝笂寰€涓嬶紝浠庝笅寰€涓婏紝浠庡乏涓婂線鍙充笅锛屼粠鈥︹€︼紙閮芥噦鐨勶紝涓嶅叏鍐欎簡锛?/p>
鍏朵腑鐨?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">left top(浠庡乏涓婂線鍙充笅)姝ｅソ鎴戜滑涓€寮€濮嬬殑渚嬪瓙浣跨敤浜嗭紝鐜板湪鐪嬬湅锛岀◢寰兂鎯筹紝灏辩煡閬撴垜浠娇鐢ㄩ敊浜嗭紒
鏄剧劧锛屼粠(100,100)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(300,300)鏄釜45搴﹀€嶆暟瑙掞紱鑰?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">left top鐨勮搴︽槸鐩村鍙充笅瑙掔殑锛岃€屽鍣ㄦ槸400*300锛屾樉鐒讹紝涓嶆槸45搴﹀€嶆暟瑙掋€傛牴鎹垜浠笂闈㈠angle鐨勮璇嗭紝瑙掑害搴旇鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">-45掳锛?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">-45掳涓哄渾蹇冪綉鍙充笅鏂瑰悜45搴︾殑涓€鏉＄嚎锛屾濂界鍚堜粠(100,100)鍒?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(300,300)鐨勬柟鍚戯紒
3. color-stop
娓愬彉鍏抽敭棰滆壊缁撶偣锛岃娉曚负锛?/p>
<color> [ <percentage> | <length> ]
涓枃瑙ｉ噴灏辨槸锛岄鑹插€?绌烘牸+鐧惧垎姣旀垨闀垮害鍊笺€備緥濡?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">red 100px. 璁颁綇锛岃繖閲岀殑棰滆壊鍊煎彧鑳戒竴涓紝鍥犳锛屄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">red 100px 100px鏄畬鍏ㄩ敊璇淮锛?/p>
OK锛岀幇鍦ㄦ垜浠畾涔夐噸鏂版⒊鐞嗕簡涓€閬嶏紝鐜板湪瀹炵幇涓€寮€濮嬬殑娓愬彉鏁堟灉搴旇OK浜嗗惂锛岃瘯璇曞憲~
濡備笅CSS锛?/p>
{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}
濡備笅鏁堟灉锛?/p>
鑲夌溂鐪嬩笂鍘诲ソ鍍忛偅涔堝洖浜嬶紝鎴戜滑鏉ュ姣斾笅photoshop涓殑姝ｇ‘瀹炵幇锛?br>
棰潂聽聽璨屼技杩樻槸涓嶅鍟婏紝鑰屼笖宸緱鏇磋繙浜嗭紝鎬庝箞鍥炰簨锛燂紵锛?/p>
鎴戝彧鑳藉憡璇変綘锛屼簨鎯呰繙娌℃湁浣犳兂鐨勯偅涔堢畝鍗曪紒
涓夈€佹繁鍏ョ悊瑙ｇ嚎鎬ф笎鍙樼殑瑙掑害鍧愭爣
涓婇潰鐨勪唬鐮佹垜浠◢寰慨鏀逛笅锛屽姞涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">-webkit鍓嶇紑浠ュ強-moz鍓嶇紑鐪嬬湅锛?/p>
{background-image:-webkit-linear-gradient(-45deg, red 100px, yellow 200px);}
濡備笅鏁堟灉锛堥潪webkit鍐呮牳鎴浘锛夛細
鍝庡憖锛岃矊浼艰搴﹀浜嗗槢锛佸拫鍥炰簨銆?/p>
杩欐槸Chrome娴忚鍣ㄤ笅鐨勪竴涓钁╅棶棰橈紝鏈€杩戯紝Chrome娴忚鍣ㄥ凡缁忓幓鎺変簡CSS3娓愬彉鐨勭鏈夊墠缂€锛屼絾鏄紝鍏朵腑鐨勮В鏋愪篃鏈変簡鍐欏彉鍖栵細
background-image:-webkit-linear-gradient(-45deg, red, yellow)
涓?/p>
background-image:linear-gradient(-45deg, red, yellow)
鍦–hrome娴忚鍣ㄤ笅鐨勬笎鍙樻柟鍚戝眳鐒舵槸鐩稿弽鐨勶紒45deg鏄甯哥殑銆?/p>
Firefox娴忚鍣ㄤ笅涔熸槸濡傛锛屾湁鍓嶇紑鍜屾病鏈夊墠缂€鏂瑰悜鐩稿弽锛佸拫鍥炰簨锛?/p>
鍘熷洜寰堢畝鍗曪紝CSS3鐩墠杩樻槸鑽夋闃舵锛?/p>
浠庢祻瑙堝櫒鍘绘帀鍓嶇紑鍓嶅悗鐨勫彉鍖栧彲浠ユ帹娴嬶紝涔嬪墠锛學3C鐨勬笎鍙樺潗鏍囨槸涓巔hotoshop涓竴鑷寸殑锛屼絾鏄紝鍚庢潵锛岀敱浜庢煇浜涘師鍥狅紝淇敼浜嗐€?/p>
鑷充簬浠€涔堝師鍥狅紝鏍规嵁鎴戣崏鑽夌殑鏌ユ壘锛屽彲鑳戒笌涓嬮潰鍑犱釜鍏抽敭瀛椾箣涓€鏈夎仈绯伙細animation/transition鍔ㄧ敾銆?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">write-mode涔﹀啓鏂瑰悜銆?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">flex box妯″瀷銆佷互鍙?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">radial-gradient娓愬彉绛夈€?/p>
鐩墠鐨?a style="color: #34538b;" href="http://dev.w3.org/csswg/css-images-3/#linear-gradients">瑙勮寖鏄繖涔堣鐨勶細
using angles
For the purpose of this argument, 鈥?deg鈥?points upward, and positive angles represent clockwise rotation, so 鈥?0deg鈥?point toward the right.
涔熷氨鏄細
浣跨敤angles
鍙傛暟閲婁箟濡備笅锛屸€?deg鈥欐寚鍚戜笂闈紝鍚屾椂姝ｈ搴﹂『鏃堕拡鏃嬭浆锛屽洜姝も€?0deg鈥欐寚鍚戝彸杈广€?/p>
鎴戜滑鐢讳竴涓嬪氨鏄細
鍙锛岀洰鍓嶏紝瑙勮寖鐨勬笎鍙樺潗鏍囩郴涓巔hotoshop鏄湁宸紓鐨勩€?/p>
鍚屾椂锛屼篃鍛婅鎴戜滑锛岀鏈夊墠缂€鍙笉鑳戒贡鐢ㄥ摝锛?/p>
闈㈠悜鏈潵锛屾樉鐒舵垜浠兘瑕佽窡鐫€瑙勮寖璧帮紝浜庢槸鏈塁SS锛?/p>
{background-image:linear-gradient(135deg, red 100px, yellow 200px);}
鏁堟灉涓猴細
涓嶱S鍥炬瘮涓€涓嬶細
鎴戝幓~鎬庝箞杩樻槸鏈夊嚭鍏ュ晩锛熲€斺€旂孩鑹插尯鍩熷ぇ灏忔槑鏄句笉涓€鏍峰槢锛?/p>
鎴戝彧鑳藉憡璇変綘锛屼簨鎯呰繙娌℃湁浣犳兂鐨勯偅涔堢畝鍗曪紒
鍥涖€佹繁鍏ョ悊瑙ｈ搴﹀潗鏍囦笌浣嶇疆鍏崇郴
瀵逛簬鏂滃悜绾挎€ф笎鍙橈紝鐐瑰埌鐐圭殑娓愬彉鍙笉鏄洿鎺ユ妸鐐圭殑妯潗鏍囨斁涓婂幓灏卞彲浠ョ殑銆傚洜涓哄綋娓愬彉鍊炬枩鐨勬椂鍊欙紝娓愬彉鐨勮捣姝㈢偣鐨勫潗鏍囦篃鍙戠敓鍙樺寲浜嗐€備笅鍥炬槸瀹樻柟瑙勮寖鐨勪竴寮犵ず鎰忓浘锛屾紨绀虹殑鏄?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">45deg娓愬彉鐨勮捣姝㈢偣浠ュ強鏂瑰悜銆?/p>
璁颁綇涓€涓叧閿偣锛屾笎鍙樼殑璧风偣鍜岀粓鐐癸紙榛樿锛夊湪杩囦腑蹇冪殑娓愬彉绾跨殑鍨傜洿绾夸笂锛屼簬鏄紝鎴戜滑灏卞彲浠ョ‘瀹氳捣鐐逛笌缁堢偣鐨勪綅缃簡銆傛寜鐓ц繖涓悊瑙ｏ紝鎴戜滑灏卞彲浠ョ敾鍑?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">400*300聽div涓?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">135deg璧峰鐐瑰湪鍝噷锛岀劧鍚庡啀纭畾(100,100)鍜?code style="border: 1px solid #eaeaea; border-radius: 3px; padding: 0px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; background-color: #f8f8f8;">(200,200)鐨勪綅缃氨杞绘澗澶氫簡銆?/p>
濡備笅绀烘剰鍥撅細
涓€鍥鹃《鍓嶈█锛屽弽姝ｄ笂闈㈣繖寮犲浘鎴戞槸鐪嬫噦浜嗐€備簬鏄紝鎴戜滑鐨勫潗鏍囪捣姝㈢偣鍊煎叾瀹炲氨鍙樻垚浜嗭紝榛戣壊鎷姬鐨勯暱搴︿互鍙婄传鑹叉嫭寮х殑闀垮害鍊煎垎鍒灏戯紒
铏界劧寰堝浜轰笉鍠滄鏁板锛屼絾鏄嚑浣曞簲璇ラ兘杩樹笉閿欙紝鎴戜滑鏉ヤ竴璧风畻涓€涓嬧€︹€?/p>
//zxx: 闀垮害璁＄畻涓€︹€?/span>
缁撴灉涓猴紝璧风偣锛?/p>
100 * Math.sqrt(2) = 141.4213562373095;
缁堢偣涓猴細
200 * Math.sqrt(2) = 282.842712474619;
CSS鐢ㄤ笂锛?/p>
{background-image:linear-gradient(135deg, red 141.4213562373095px, yellow 282.842712474619px);}
鏁堟灉锛?/p>
涓嶱S鐨勬晥鏋滄瘮瀵逛笅锛?br>
鍝囧摝锛屼竴鏍蜂簡鍞夛紒榧撴帉锛?br>
浜斻€佺粨鏉熻
濂藉ソ瀛︿範锛屽ぉ澶╁悜涓婏紒
鍘熷垱鏂囩珷锛岃浆杞借娉ㄦ槑鏉ヨ嚜寮犻懌鏃?閼┖闂?閼敓娲?/a>[http://www.zhangxinxu.com]
鏈枃鍦板潃锛?a style="color: #34538b;" href="http://www.zhangxinxu.com/wordpress/?p=3639">http://www.zhangxinxu.com/wordpress/?p=3639
锛堟湰绡囧畬锛?/p>