css3box-shadow单边阴影
1．单边阴影效果
定义元素的单边阴影效果和调协border的单边边框颜⾊是相似的，例如：
1. >
2. <html lang="en-US">
3. <head>
box shadow怎么设置4.  <meta charset="UTF-8">
5.  <title>box-shadow设置单边阴影效果title>
6.  <style type="text/css">
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.  style>
27. head>
28. <body>
29.  <div class="box-shadow top">div>
30.  <div class="box-shadow right">div>
31.  <div class="box-shadow bottom">div>
32.  <div class="box-shadow left">div>
33. body>
34. html>
效果如图3-38所⽰。
这个案例中，使⽤box-shadow给元素设置了顶边、右边、底边和左边的单边阴影效果。主要通过box-shadow的⽔平和垂直阴影的偏移量来实现，其中x-offset为正值时，⽣成右边阴影，反之为负值时，⽣成左边阴影；y-offset为正值时，⽣成底部阴影，反之为负值时⽣成顶部阴影。此例中是⼀个单边实影投影效果（阴影模糊半径为0），但是如果阴影的模糊半径不是0，上⾯的⽅法还能不能实现单边阴影效果呢？不急着来回答，在上⾯的实例中添加⼀个模糊半径，例如：
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阴影模糊半径后，阴影不再是实影投影，阴影清晰度向外扩散，更具阴影的效果。但造成了另⼀个问题，给元素其他三个边加上淡淡的阴影效果，可这并不是设计需要的效果。
那究竟要怎么做呢？此时，box-shadow属性中的阴影扩展半径（spread-radius）会是⼀个很关键的属性，要实现单边阴影效果，必须配上这个属性（除单边实影之外）。
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.    }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。