CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。

    1. /* x偏移量 | y偏移量 | 阴影颜色 */
    2. box-shadow: 60px -16px teal;
    4. /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
    5. box-shadow: 10px 5px 5px black;
    7. /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    8. box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    10. /* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
    11. box-shadow: inset 5em 1em gold;
    13. /* 任意数量的阴影，以逗号分隔 */
    14. box-shadow: 3px 3px red, -1em 0 0.4em olive;
    16. /* 全局关键字 */
    17. box-shadow: inherit;
    18. box-shadow: initial;
    19. box-shadow: unset;

    说明：

    • inset: 默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。也有些人喜欢把这个值放在最后，浏览器也支持。
    • <offset-x> <offset-y>: 这是头两个 <length>值，用来设置阴影偏移量。<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length>。如果两者都是0，那么阴影位于元素后面。这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。
    • <blur-radius>: 这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
    • <spread-radius> : 这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
    • <color> : 相关事项查看 <color> 。如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。

    image.png
    image.png
    image.png

    1. div {
    2.     width: 150px;
    3.     height: 150px;
    4.     background-color: #fff;
    6.     box-shadow: 120px 80px 40px 20px #0ff;
    7.     /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    8.     /* blur-size 和 spread-size 是可选的 (默认为 0) */
    9. }

    image.png

    1. .boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; } //内阴影
    2. .boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; } //3边内影
    3. .boxshadow3{box-shadow:0 0 10px #000;} //外阴影
    4. .boxshadow4{box-shadow:2px 2px 5px #000;} //右下外阴影
    5. .boxshadow5{box-shadow:0 0 5px 15px #000;} //扩大阴影
    6. .boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);} //半透明阴影色
    1. .boxshadow1{ box-shadow:inset 0px 15px 10px -15px #000; } //上边内阴影 -15抵消
    2. .boxshadow2{ box-shadow:inset -15px 0px  10px -15px #000;} //右边内阴影
    3. .boxshadow3{box-shadow:0px 12px 8px -12px #000; border-radius:10px; } //下边外阴影
    4. .boxshadow4{box-shadow:3px 0 8px -4px #000;} //右边外阴影
    5. .boxshadow5{ box-shadow: inset 0px -1px 0px 0px rgb(0, 0, 0) ;} //下边细线
    1. //上下边内阴影
    2. .boxshadow1{ 
    3.   box-shadow:inset 0px 15px 15px -15px #000,
    4.              inset 0px -15px 15px -15px #000; 
    5. }
    7. //左右边外阴影
    8. .boxshadow2{ 
    9.   box-shadow:15px 0 15px -15px #000,
    10.              -15px 0 15px -15px #000;
    11. }
    13. //多层阴影
    14. .boxshadow3{ border-radius:10px; 
    15.   box-shadow:0px 0px 0px 3px #bb0a0a,
    16.              0px 0px 0px 6px #2e56bf,
    17.              0px 0px 0px 9px #ea982e;
    18. }
    1. <div class="box11 shadow"></div>
    5. .box11 {
    6.     width: 300px;
    7.     height: 100px;
    8.     background: #ccc;
    9.     border-radius: 10px;
    10.     margin: 10px;
    11. }
    14. .shadow {
    15.     position: relative;
    16.     max-width: 270px;
    17.     box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
    18.                 0px 0px 20px rgba(0,0,0,0.1) inset;
    19. }
    21. .shadow::before,
    22. .shadow::after {
    23.    content:"";
    24.    position:absolute;
    25.    z-index:-1;
    26. }
    28. .shadow::before,
    29. .shadow::after {
    30.    content:"";
    31.    position:absolute;
    32.    z-index:-1;
    33.    bottom:15px;
    34.    left:10px;
    35.    width:50%;
    36.    height:20%;
    37. }
    39. .shadow::before,
    40. .shadow::after {
    41.    content:"";
    42.    position:absolute;
    43.    z-index:-1;
    44.    bottom:15px;
    45.    left:10px;
    46.    width:50%;
    47.    height:20%;
    48.    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    49.    transform:rotate(-3deg);
    50. }
    52. .shadow::after{
    53.    right:10px;
    54.    left:auto;
    55.    transform:rotate(3deg);
    56.  }
    1. <div class="wrap">
    2.   <div class="box box1 shadow1">
    3.     <h3>Shadow 1</h3>
    4.   </div>
    5.   <div class="box box2 shadow2">
    6.     <h3>Shadow 2</h3>
    7.   </div>
    8.   <div class="box box3 shadow3">
    9.     <h3>Shadow 3</h3>
    10.   </div>
    11.   <div class="box box4 shadow4">
    12.     <h3>Shadow 4</h3>
    13.   </div>
    14.   <div class="box box5 shadow5">
    15.     <h3>Shadow 5</h3>
    16.   </div>
    17.   <div class="box box6 shadow6">
    18.     <h3>Shadow 6</h3>
    19.   </div>
    20.   <div class="box box7 shadow7">
    21.     <h3>Shadow 7</h3>
    22.   </div>
    23.   <div class="box box8 shadow8">
    24.     <h3>Shadow 8</h3>
    25.   </div>
    26. </div>  
    31.   background:#E6EEF6;
    32. }
    33. .wrap{
    34.   margin-left:20px;
    35. }
    36. .box{
    37.   width:40%;
    38.   height:200px;
    39.   float:left;
    40.   background-color:white; 
    41.   margin:25px 15px;
    42.   border-radius:5px;
    43. }
    44. .box h3{
    45.   font-family: 'Didact Gothic', sans-serif;
    46.   font-weight:normal;
    47.   text-align:center;
    48.   padding-top:60px;
    49.   color:#fff;
    50. }
    51. .box1{
    52.   background-color: #EBA39E;
    53. }
    54. .box2{
    55.   background-color: #EDE89A;
    56. }
    57. .box3{
    58.   background-color: #9EEBA1;
    59. }
    60. .box4{
    61.   background-color: #9EEBBF;
    62. }
    63. .box5{
    64.   background-color: #9ED9EB;
    65. }
    66. .box6{
    67.   background-color: #9EB3EB;
    68. }
    69. .box7{
    70.   background-color: #DB9EEB;
    71. }
    72. .box8{
    73.   background-color: #C49EEB;
    74. }
    75. .shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    76.   position:relative;
    77. }
    78. .shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    79.     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    80. }
    81. /*****************************************************************dashed border
    82. ****************************************************************/
    83. .shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
    84.   width:87%;
    85.   height:100px;
    86.   margin-left:6%;
    87.   border:2px dashed #F7EEEE;
    88.   border-radius:5px;
    89. }
    90. /****************************************************************
    91. *styling shadows
    92. ****************************************************************/
    93. .shadow1:before, .shadow1:after{
    94.   position:absolute;
    95.   content:"";
    96.   bottom:12px;left:15px;top:80%;
    97.   width:45%;
    98.   background:#9B7468;
    99.   z-index:-1;
    100.   -webkit-box-shadow: 0 20px 15px #9B7468;
    101.   -moz-box-shadow: 0 20px 15px #9B7468;
    102.   box-shadow: 0 20px 15px #9B7468;
    103.   -webkit-transform: rotate(-6deg);
    104.   -moz-transform: rotate(-6deg);
    105.   transform: rotate(-6deg);
    106. }
    107. .shadow1:after{
    108.   -webkit-transform: rotate(6deg);
    109.   -moz-transform: rotate(6deg);
    110.   transform: rotate(6deg);
    111.   right: 15px;left: auto;
    112. }
    113. .shadow2:before{
    114.   position:absolute;
    115.   content:"";
    116.   width:80%;
    117.   top:140px;bottom:15px;left:30px;
    118.   background-color:#9F8641;
    119.   z-index:-1;
    120.   -webkit-box-shadow:0 23px 17px 0 #9F8641;
    121.   -moz-box-shadow:0 23px 17px 0 #9F8641;
    122.   box-shadow: 0 23px 17px 0 #9F8641;
    123.   -webkit-transform:rotate(-4deg);
    124.   -moz-transform:rotate(-4deg);
    125.   transform:rotate(-4deg);
    126. }
    127. .shadow3:before, .shadow3:after{
    128.   content:"";
    129.   position:absolute;
    130.   bottom:0;top:2px;left:15px;right:15px;
    131.   z-index:-1;
    132.   border-radius:100px/30px;
    133.  -webkit-box-shadow:0 0 30px 2px #479F41;
    134.   -moz-box-shadow:0 0 30px 2px #479F41;
    135.   box-shadow: 0 0 30px 2px #479F41;
    136. }
    137. .shadow4:before, .shadow4:after{
    138.   position:absolute;
    139.   content:"";
    140.   top:14px;bottom:14px;left:0;right:0;
    141.   box-shadow:0 0 25px 3px #548E7F;
    142.   border-radius:100px/10px;
    143.   z-index:-1;
    144. }
    145. .shadow5:before, .shadow5:after{
    146.   position:absolute;
    147.   content:"";
    148.   box-shadow:0 10px 25px 20px #518C96;
    149.   top:40px;left:10px;bottom:50px;
    150.   width:15%;
    151.   z-index:-1;
    152.   -webkit-transform: rotate(-8deg);
    153.   -moz-transform: rotate(-8deg);
    154.   transform: rotate(-8deg);
    155. }
    156. .shadow5:after{
    157.   -webkit-transform: rotate(8deg);
    158.   -moz-transform: rotate(8deg);
    159.   transform: rotate(8deg);
    160.   right: 10px;left: auto;
    161. }
    162. .shadow6:before, .shadow6:after{
    163.   position:absolute;
    164.   content:"";
    165.   top:100px;bottom:5px;left:30px;right:30px;
    166.   z-index:-1;
    167.   box-shadow:0 0 40px 13px #486685;
    168.   border-radius:100px/20px; 
    169. }
    170. .shadow7:before, .shadow7:after{
    171.   position:absolute;
    172.   content:"1";
    173.   top:25px;left:20px;bottom:150px;
    174.   width:80%;
    175.   z-index:-1;
    176.   -webkit-transform: rotate(-6deg);
    177.   -moz-transform: rotate(-6deg);
    178.   transform: rotate(-6deg);
    179. }
    180. .shadow7:before{
    181.   box-shadow:10px -10px 30px 15px #984D8E;
    182. }
    183. .shadow7:after{
    184.   -webkit-transform: rotate(7deg);
    185.   -moz-transform: rotate(7deg);
    186.   transform: rotate(7deg);
    187.   bottom: 25px;top: auto;
    188.   box-shadow:10px 10px 30px 15px #984D8E;
    189. }
    190. .shadow8{
    191.   box-shadow:
    192.  -6px -6px 8px -4px rgba(250,254,118,0.75),
    193.   6px -6px 8px -4px rgba(254,159,50,0.75),
    194.   6px 6px 8px -4px rgba(255,255,0,0.75),
    195.   6px 6px 8px -4px rgba(0,0,255,2.75);
    196. }