CSS3 设置盒子三边内阴影、双边内阴影、单边内阴影

对之前的博文进行完善。
相信对于CSS3 中box-shadow 属性大家都不陌生，但是很多新手看到参考手册估计一时半会还摸不着头脑吧，值是知道设置了，但是怎样达到自己想要的效果呢？

今天我跟大家分享关于box-shadow 相对于盒子边设置阴影的问题。
（1）（上左右内置阴影）。为了美观，加上了border -radius 属性。

阴影设置代码：

        box-shadow: 0 17px 10px 10px #ff8c1a inset; 
         //底部阴影数值设置大于左右阴影数值，将底部阴影往顶部阴影挤。

（2）（上边内阴影）

代码：

  box-shadow: 0 17px 10px -8px #ff8c1a inset;
    //将左右阴影设置负值，使阴影脱离盒子边框。

（3） （ 右边内阴影） （前面两个没弄背景颜色CSS3 设置盒子三边内阴影、双边内阴影、单边内阴影加上之后是这样纸滴~~~~~~)

代码：

  box-shadow: -20px -2px 15px -13px #ff8c1a inset;
   //相应可以设置左边和底部单边。

（4）（上下内阴影）
由于单纯的一个CSS3 只能够设置一个盒子的属性，所以在设置盒子双边时就需要设置两个div，内外div 分别设置单边阴影。要记得内外div 都要加上宽高。

实现代码：

注：有必要加上 -moz-、-webkit-前缀来兼容火狐谷歌等浏览器的渲染模式。
接下来讲讲盒子外阴影的问题，外阴影和内阴影的设置差不多，只是内阴影需要设置“inset”属性值，而默认就是外阴影。
1）全外阴影：box-shadow: 0 0 50px #f7b606；

2）三边阴影，这里三边阴影就是直接把整个阴影部分往下边移了。box-shadow:0 25px 30px #f7b606;（额~不好看）

3）双边阴影：

相应也是在两个镶嵌的div里设置阴影

    .container{height:300px;width: 300px;margin:120px       auto;box-shadow:0 20px 20px -15px #f7b606; }
        .containertwo{height:100%;width: 100%;box-shadow:0 -20px 20px -15px #f7b606;}

4)单边阴影：box-shadow:0 20px 20px -15px #f7b606;

关注公众号bug人生回复“资料”即可获得为您精心准备的前端视频学习资料