日期:2014-05-17  浏览次数:20541 次

CSS3 box-shadow(杞?

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:鏄寚闃村奖姘村钩鍋忕Щ閲忓叾鍊煎彲浠ユ槸姝h礋鍊煎彲浠ュ彇姝h礋鍊硷紝濡傛灉鍊间负姝e€硷紝鍒欓槾褰卞湪瀵硅薄鐨勫彸杈癸紝鍙嶄箣鍏跺€间负璐熷€兼椂锛岄槾褰卞湪瀵硅薄鐨勫乏杈癸紱

Y-offset:鏄寚闃村奖鐨勫瀭鐩村亸绉婚噺锛屽叾鍊间篃鍙互鏄璐熷€硷紝濡傛灉涓烘鍊硷紝闃村奖鍦ㄥ璞$殑搴曢儴锛屽弽涔嬪叾鍊间负璐熷€兼椂锛岄槾褰卞湪瀵硅薄鐨勯《閮紱

闃村奖妯$硦鍗婂緞锛?/strong>姝ゅ弬鏁版槸鍙€夛紝锛屼絾鍏跺€煎彧鑳芥槸涓烘鍊硷紝濡傛灉鍏跺€间负0鏃讹紝琛ㄧず闃村奖涓嶅叿鏈夋ā绯婃晥鏋滐紝鍏跺€艰秺澶ч槾褰辩殑杈圭紭灏辫秺妯$硦锛?/p>

闃村奖鎵╁睍鍗婂緞锛?/strong>姝ゅ弬鏁板彲閫夛紝鍏跺€煎彲浠ユ槸姝h礋鍊硷紝濡傛灉鍊间负姝o紝鍒欐暣涓槾褰遍兘寤跺睍鎵╁ぇ锛屽弽涔嬪€间负璐熷€兼槸锛屽垯缂╁皬

闃村奖棰滆壊锛?/strong>姝ゅ弬鏁板彲閫夛紝濡傛灉涓嶈瀹氫换浣曢鑹叉椂锛屾祻瑙堝櫒浼氬彇榛樿鑹诧紝浣嗗悇娴忚鍣ㄩ粯璁よ壊涓嶄竴鏍凤紝鐗瑰埆鏄湪webkit鍐呮牳涓嬬殑safari鍜宑hrome娴忚鍣ㄥ皢鏃犺壊锛屼篃灏辨槸閫忔槑锛屽缓璁笉瑕佺渷鐣ユ鍙傛暟銆?/p>

娴忚鍣ㄧ殑鍏煎锛?/strong>

鎴戜滑杩欓噷杩樻秹鍙婂埌涓€涓悇娴忚鍣ㄥ墠缂€鐨勯棶棰橈紝姣斿璇碝ozilla鍐呮牳鐨?moz锛寃ebkit鍐呮牳鐨?webkit銆傜粡娴嬭瘯鍦ㄦ渶鏂扮増鐨凢irefox鍜?Google Chrome娴忚鍣ㄩ兘鏃犻渶鍔犱笂鍓嶇紑锛屼絾鍦╯afari涓繕鏄渶瑕佸墠缂樼殑锛屼负浜嗚兘鍏煎鏀寔鐨勫悇澶ф祻瑙堝櫒锛屾垜浠湪涔﹀啓box-shadow鐨勬牸寮忓簲璇ヨ繖鏍?/p>

//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杞村亸绉婚噺 闃村奖妯$硦鍗婂緞 闃村奖鎵╁睍鍗婂緞 闃村奖棰滆壊;

box-shadow鐨勭壒寰侊細

杈冧箣ps鍒朵綔鍑烘潵鐨勫浘鐗囩浉姣旓紝CSS3鐨刡ox-shadow鍙互 閫氳繃鏀瑰彉鍏跺弬鏁板緱鍒颁笉鍚岀殑鏁堟灉锛屽锛氭敼鍙橀槾褰卞亸绉婚噺鐨勮缃紝鎴戜滑鍙互浣跨敤闃村奖鍙湪瀵硅薄