聽
CSS3 box-shadow鍘熸枃
聽
涓婁竴鑺傛垜浠竴璧锋帰璁ㄤ簡涓€涓?a target="_blank" href="http://www.w3.org/TR/css3-roadmap/">CSS3鐨勬枃瀛楅槾褰?a target="_blank" href="http://www.w3cplus.com/node/52">text-shadow鐨勪娇鐢ㄦ柟娉曪紝浠婂ぉ鎴戜滑鎺ョ潃涓€璧锋潵鎺㈣涓€涓?a target="_blank" href="http://www.w3.org/TR/css3-roadmap/">CSS3涓殑鍙︿竴涓睘鎬?a target="_blank" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow">box-shadow鐨勪娇鐢ㄦ柟娉曘€?a target="_blank" href="http://www.w3.org/TR/css3-roadmap/">CSS3鐨?a target="_blank" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow">box-shadow鏈夌偣绫讳技浜?a target="_blank" href="http://www.w3cplus.com/node/52">text-shadow锛屽彧涓嶈繃涓嶅悓鐨勬槸text-shadow鏄璞＄殑鏂囨湰璁剧疆闃村奖锛岃€?a target="_blank" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow">box-shadow鏄粰瀵硅薄瀹炵幇鍥惧眰闃村奖鏁堟灉銆?/em>
鏈枃鎴戜滑鎼佷笅IE涓嶈皥锛屽彧璋堣皥box-shadow鐨勫叿浣撲娇鐢ㄦ柟娉?/em>
聽
璇硶锛?/strong>
聽
E {box-shadow: <length> <length> <length>?<length>?||<color>}
涔熷氨鏄細
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
鎹㈠彞璇达細
瀵硅薄閫夋嫨鍣?{box-shadow:鎶曞奖鏂瑰紡 X杞村亸绉婚噺 Y杞村亸绉婚噺 闃村奖妯＄硦鍗婂緞 闃村奖鎵╁睍鍗婂緞 闃村奖棰滆壊}
聽
聽
box-shadow鍜宼ext-shadow涓€鏍峰彲浠ヤ娇鐢ㄤ竴涓垨澶氫釜鎶曞奖锛屽鏋滀娇鐢ㄥ涓姇褰辨椂蹇呴』闇€瑕佺敤閫楀彿鈥滐紝鈥濆垎寮€銆?/p>
鍙栧€硷細
box-shadow灞炴€ц嚦澶氭湁6涓弬鏁拌缃紝浠栦滑鍒嗗埆鍙栧€硷細
闃村奖绫诲瀷锛?/strong>姝ゅ弬鏁版槸涓€涓彲閫夊€硷紝濡傛灉涓嶈鍊硷紝鍏堕粯璁ょ殑鎶曞奖鏂瑰紡鏄闃村奖锛涘鏋滃彇鍏跺敮涓€鍊尖€渋nset鈥?灏辨槸灏嗗闃村奖鍙樻垚鍐呴槾褰憋紝涔熷氨鏄璁剧疆闃村奖绫诲瀷涓衡€渋nset鈥濇椂锛屽叾鎶曞奖灏辨槸鍐呴槾褰憋紱
X-offset:鏄寚闃村奖姘村钩鍋忕Щ閲忓叾鍊煎彲浠ユ槸姝ｈ礋鍊煎彲浠ュ彇姝ｈ礋鍊硷紝濡傛灉鍊间负姝ｅ€硷紝鍒欓槾褰卞湪瀵硅薄鐨勫彸杈癸紝鍙嶄箣鍏跺€间负璐熷€兼椂锛岄槾褰卞湪瀵硅薄鐨勫乏杈癸紱
Y-offset:鏄寚闃村奖鐨勫瀭鐩村亸绉婚噺锛屽叾鍊间篃鍙互鏄璐熷€硷紝濡傛灉涓烘鍊硷紝闃村奖鍦ㄥ璞＄殑搴曢儴锛屽弽涔嬪叾鍊间负璐熷€兼椂锛岄槾褰卞湪瀵硅薄鐨勯《閮紱
闃村奖妯＄硦鍗婂緞锛?/strong>姝ゅ弬鏁版槸鍙€夛紝锛屼絾鍏跺€煎彧鑳芥槸涓烘鍊硷紝濡傛灉鍏跺€间负0鏃讹紝琛ㄧず闃村奖涓嶅叿鏈夋ā绯婃晥鏋滐紝鍏跺€艰秺澶ч槾褰辩殑杈圭紭灏辫秺妯＄硦锛?/p>
闃村奖鎵╁睍鍗婂緞锛?/strong>姝ゅ弬鏁板彲閫夛紝鍏跺€煎彲浠ユ槸姝ｈ礋鍊硷紝濡傛灉鍊间负姝ｏ紝鍒欐暣涓槾褰遍兘寤跺睍鎵╁ぇ锛屽弽涔嬪€间负璐熷€兼槸锛屽垯缂╁皬 闃村奖棰滆壊锛?/strong>姝ゅ弬鏁板彲閫夛紝濡傛灉涓嶈瀹氫换浣曢鑹叉椂锛屾祻瑙堝櫒浼氬彇榛樿鑹诧紝浣嗗悇娴忚鍣ㄩ粯璁よ壊涓嶄竴鏍凤紝鐗瑰埆鏄湪webkit鍐呮牳涓嬬殑safari鍜宑hrome娴忚鍣ㄥ皢鏃犺壊锛屼篃灏辨槸閫忔槑锛屽缓璁笉瑕佺渷鐣ユ鍙傛暟銆?/p>
娴忚鍣ㄧ殑鍏煎锛?/strong> 鎴戜滑杩欓噷杩樻秹鍙婂埌涓€涓悇娴忚鍣ㄥ墠缂€鐨勯棶棰橈紝姣斿璇碝ozilla鍐呮牳鐨?moz锛寃ebkit鍐呮牳鐨?webkit銆傜粡娴嬭瘯鍦ㄦ渶鏂扮増鐨凢irefox鍜?Google Chrome娴忚鍣ㄩ兘鏃犻渶鍔犱笂鍓嶇紑锛屼絾鍦╯afari涓繕鏄渶瑕佸墠缂樼殑锛屼负浜嗚兘鍏煎鏀寔鐨勫悇澶ф祻瑙堝櫒锛屾垜浠湪涔﹀啓box-shadow鐨勬牸寮忓簲璇ヨ繖鏍?/p>
聽 聽 box-shadow鐨勭壒寰侊細 杈冧箣ps鍒朵綔鍑烘潵鐨勫浘鐗囩浉姣旓紝CSS3鐨刡ox-shadow鍙互 閫氳繃鏀瑰彉鍏跺弬鏁板緱鍒颁笉鍚岀殑鏁堟灉锛屽锛氭敼鍙橀槾褰卞亸绉婚噺鐨勮缃紝鎴戜滑鍙互浣跨敤闃村奖鍙湪瀵硅薄
聽//Firefox4.0-
-moz-box-shadow: 鎶曞奖鏂瑰紡 X杞村亸绉婚噺 Y杞村亸绉婚噺 闃村奖妯＄硦鍗婂緞 闃村奖鎵╁睍鍗婂緞 闃村奖棰滆壊;
//Safari and Google chrome10.0-
-webkit-box-shadow: 鎶曞奖鏂瑰紡 X杞村亸绉婚噺 Y杞村亸绉婚噺 闃村奖妯＄硦鍗婂緞 闃村奖鎵╁睍鍗婂緞 闃村奖棰滆壊;
//Firefox4.0+ 銆?Google chrome 10.0+ 銆?Oprea10.5+ and IE9
box-shadow: 鎶曞奖鏂瑰紡 X杞村亸绉婚噺 Y杞村亸绉婚噺 闃村奖妯＄硦鍗婂緞 闃村奖鎵╁睍鍗婂緞 闃村奖棰滆壊;
