CSS3 box-shadow(杞

 <img src="/images/box-shadow-img.png" alt="" class="inset-shadow" />

.inset-shadow{
   -moz-box-shadow: 0 0 5px red inset;
   -webkit-box-shadow: 0 0 5px red inset;
   box-shadow: 0 0 5px red inset;
}

  <script type="text/javascript">
    $(document).ready(function(){
       $('img.inset-shadow').each(function(){
          var $img = $(this);
          $img.load(function(){
          var $div = $('<div/>');
          $div.width($img.width());
          $div.height($img.height());
          $div.css('background-image', 'url('+$img.attr('src')+')');
          var display = $img.css('display');
          //If the div is set to inline the width and height will be 0 :(
          //inline-block appears to be the only way around it but it's not
          //supported in all browsers :( The browsers it's not supported in
         //are probably the same ones that don't support box-shadow,
          //so a solution maybe to add a browser check.
         if(display === 'inline'){
            $div.css('display', 'inline-block');
          }else{
            $div.css('display', display);
          }
         $div.attr('class', $img.attr('class'));
         $img.replaceWith($div);
       });
     });
   });
 </script>

鏈夊叧img涓婁娇鐢ㄥ唴闃村奖鐨勪娇鐢ㄦ柟娉曪紝浣犲彲浠ュ弬闃?a target="_blank" href="http://trentwalton.com/2010/11/22/css-box-shadowinset/">CSS Box-Shadow:Inset涓€鏂囥€?/p>

缁檅ody椤堕儴澧炲姞涓€涓槾褰?/strong>

  body:before {
   content:"";
   position:fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 999;
   box-shadow: 0 0 10px rgba(125,255,125,0.8);
}

杩欓噷鎻愰啋澶у锛屼负浜嗕笉褰卞搷甯冨眬锛宼op鐨勫彇鍊兼渶濂藉拰height鐨勫彇鍊间竴鑷淬€傚彧鏄痶op浣跨敤璐熷€笺€傚埄鐢ㄥ悓鏍风殑鏂规硶鎴戜滑鍙互缁欎换浣曚竴涓厓绱犲姞涓婇槾褰憋紝浣嗙浉搴旈渶瑕佹敼鍙樺畾浣嶆柟寮忓叴銆?/p>

聽

Drop-shadow鏁堟灉

Drop- shadow鏁堟灉锛屽ぇ瀹跺湪Photoshop涓偗瀹氶兘瑙佽瘑杩囦簡锛屼粖澶╂垜浠槸鏉ョ湅涓€涓疄渚嬶紝涓嶅鍔犱换浣曞厓绱犳爣绛剧殑鎯呭喌涓嬶紝鎴戜滑涓昏鏄埄鐢╞ox- shadow閰嶅悎鍏冪礌鐨勪袱涓吉鍏冪礌:before鍜?after浠ュ強瀹氫綅鏉ュ疄鐜帮紝杩欑鏁堟灉鏀寔鐨勬祻瑙堝櫒鐜板湪涓昏鏈?firefox3.5+/chrome5+/safari5+/opera10.6+/Ie9+銆?/p>

鎴戜滑鍏堟潵浜嗚В涓€涓嬪叾鍘熺悊锛氭垜浠€氳繃 box-shadow瀹炵幇drop shadow鏁堟灉鏄粎鐢ㄤ竴涓猟iv鏍囩鍏冪礌锛岀劧鍚庨厤鍚堝叾涓や釜浼厓绱?:before"鍜?:after"锛涚劧鍚庢垜浠垎鍒粰鍏朵吉鍏冪礌瀹氫綅鍒癲iv鐨勫悗闈紝骞?鎶奲ox-shadow搴旂敤鍒拌繖涓や釜浼厓绱犱笂銆傚叿浣撴垜浠潵鐪嬪叾瀹炵幇姝ラ锛?/p>

鍏堟潵鐪嬪叾html浠ｇ爜锛?/p>

 <div class="drop-shadow">drop shadow effect</div>

聽鎴戝畾涔変簡涓€涓彨"drop-shadow"鐨刣iv锛岀幇鍦ㄦ垜浠粰鍏跺簲鐢ㄤ竴涓熀鏈牱寮?/p>

聽

 .drop-shadow {
    width: 300px;
    height: 150px;
    position: relative;
    background: #ccc;        
 }

聽鎺ョ潃鎴戜滑缁檇rop-shadow鐨勨€?before鈥濆拰":after"瀹氫綅鍒癲rop-shadow涓嬮潰锛?/p>

聽

 .drop-shadow:before,
 .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
 }

聽缁檇rop-shadow鐨?:before"鍜?:after"鍔犱笂闃村奖鏁堟灉

聽

 .drop-shadow:before,
 .drop-shadow:after {
     content: "";
     position: absolute;
     z-index: -1;
     bottom: 15px;
     left: 10px;
     width: 50%;
     height: 20%;
     /*add box-shadow*/
     -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
     -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
     box-shadow: 0 15px 10px rgba(125,125,125,0.8);
  }

聽鐜板湪鎴戜滑鍙緱鍒颁簡涓€杈圭殑闃村奖鏁堟灉锛岄偅鎴戜箞浠彲浠ラ€氳繃搴旂敤css3 transforms鏉ュ疄鐜板彟涓€杈圭殑鏁堟灉锛堟湁鍏矯SS3鐨?a target="_blank" href="http://www.w3.org/TR/css3-2d-transforms/">transform灞炴€т娇鐢紝鎴戜滑灏嗗湪涓嬫枃浠嬬粛锛?/p>

聽

 .drop-shadow:before,
 .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
 }

聽鎴戜滑鐜板湪鍙渶瑕佹敼鍙?:after"浼厓绱犲畾浣嶆柟鍚戙€傦紙浼厓绱?:after"鍦ㄧ浉鍙嶆柟鍚戞棆杞紝鐩稿浜?:before"锛?/p>

聽

 .drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
  }

聽Drop shadow鏈€缁堟牳蹇冧唬鐮佸涓嬫墍绀猴紝鍙槸鎴戜滑鍦ㄢ€?before鈥濆拰鈥?after鈥濅腑鍔犱簡涓€涓?max-width":鐨勯檺鍒讹紝

 .drop-shadow {
    width: 300px;
    height: 150px;
    position: relative;
    background: #ccc; 
    margin-left: 100px;       
  }

  .drop-shadow:before,
  .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    max-width: 150px;
    height: 20%;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }

 .drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
 }

聽

聽

鏈夊叧drop shadow鐨勬洿澶氱殑demo鍜?a target="_blank" href="http://matthamm.com/box-shadow-curl.html">Pure CSS3 box-shadow page curl effect鍙互鏌ラ槄銆傚鏋滃drop shadow鎰熷叴瓒ｏ紝澶у鍙互鐐瑰嚮锛?a target="_blank" href="http://nimbupani.com/drop-shadows-with-css3.html">Drop Shadows with CSS3鍜?a target="_blank" href="http://nicolasgallagher.com/css-drop-shadows-without-images/">CSS drop-shadows without images鏌ョ湅鏇磋缁嗙殑鏂囨。銆?/p>

box-shadow閰嶅悎鍏朵粬CSS3灞炴€у埗浣滃嚭鏉ョ殑瀹炰緥锛?a target="_blank" href="http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/">demo

閭ｄ滑浠婂ぉ鎴戜滑鏈夊叧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.w3cplus.com/node/44">娓愬彉Gradient銆?a target="_blank" href="http://www.w3cplus.com/node/45">閫忔槑鑹睷GBA銆?a target="_blank" href="http://www.w3cplus.com/node/48">鍦嗚border-radius鍜?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/css3-2d-transforms/">transform灞炴€э紝鎰熷叴瓒ｇ殑鏈嬪弸璇疯娉ㄦ湰娉ㄦ湁鍏?a target="_blank" href="http://www.w3.org/TR/css3-roadmap/">CSS3鐨勫崥鏂囨洿鏂版儏鍐碉紝濡傛灉浣犳湁鏇村ソ鐨勫涔犳兂娉曪紝鎴栬€呭鏈珯浠嬬粛鐨?a target="_blank" href="http://www.w3.org/TR/css3-roadmap/">CSS3鏈夋洿濂界殑寤鸿鍙互闅忔椂鑱旂郴鎴戙€?/p>