CSS3------box-shadow，即單邊陰影效果設置

時間 2019-12-04

標籤 css3 css box shadow 單邊陰影效果設置欄目 CSS 简体版

原文原文鏈接

box-shadow修改元素的陰影效果要方便得多，由於box-shadow能夠修改六個參數，獲得不一樣的效果。下面結合一些簡單的案例來對box-shadow屬性進行演示說明。html

1．單邊陰影效果瀏覽器

定義元素的單邊陰影效果和調協border的單邊邊框顏色是類似的，例如：spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7       .box-shadow {
 8         width: 200px;
 9         height: 100px;
10         border-radius: 5px;
11         border: 1px solid #ccc;
12         margin: 20px;
13       }
14       .top {
15         box-shadow: 0 -2px 0 red;
16       }
17       .right {
18         box-shadow: 2px 0 0 green;
19       }
20       .bottom {
21         box-shadow: 0 2px 0 blue;
22       }
23       .left {
24         box-shadow: -2px 0 0 orange;
25       }
26 
27     </style>
28 
29 </head>
30 <body>
31   <div class="box-shadow top"></div>
32   <div class="box-shadow right"></div>
33   <div class="box-shadow bottom"></div>
34   <div class="box-shadow left"></div>
35 </body>
36 </html>

效果如圖3-38所示。設計

這個案例中，使用box-shadow給元素設置了頂邊、右邊、底邊和左邊的單邊陰影效果。主要經過box-shadow的水平和垂直陰影的偏移量來實現，其中x-offset爲正值時，生成右邊陰影，反之爲負值時，生成左邊陰影；y-offset爲正值時，生成底部陰影，反之爲負值時生成頂部陰影。此例中是一個單邊實影投影效果（陰影模糊半徑爲0），可是若是陰影的模糊半徑不是0，上面的方法還能不能實現單邊陰影效果呢？不急着來回答，在上面的實例中添加一個模糊半徑，例如：code

 1 .top {  
 2       box-shadow: 0 -2px 5px red;  
 3     }  
 4     .right {  
 5       box-shadow: 2px 0 5px green;  
 6     }  
 7     .bottom {  
 8       box-shadow: 0 2px 5px blue;  
 9     }  
10     .left {  
11       box-shadow: -2px 0 5px orange;  
12     }

圖3-39說明，這個效果並非理想的單邊陰影效果，當box-shadow添加了5px陰影模糊半徑後，陰影再也不是實影投影，陰影清晰度向外擴散，更具陰影的效果。但形成了另外一個問題，給元素其餘三個邊加上淡淡的陰影效果，可這並非設計須要的效果。htm

那究竟要怎麼作呢？此時，box-shadow屬性中的陰影擴展半徑（spread-radius）會是一個很關鍵的屬性，要實現單邊陰影效果，必須配上這個屬性（除單邊實影以外）。blog

 1 .top {  
 2       box-shadow: 0 -4px 5px -3px red;  
 3     }  
 4     .right {  
 5       box-shadow: 4px 0 5px -3px green;  
 6     }  
 7     .bottom {  
 8       box-shadow: 0 4px 5px -3px blue;  
 9     }  
10     .left {  
11       box-shadow: -4px 0 5px -3px orange;  
12     }