如何html阴影效果图,css3常见好看的投影效果_css3阴影box-shadow高大上用法

在设计图会经常使用到的阴影效果，如何用css3来实现呢？这篇文章主要整理box-shadow的一些好看常用的投影效果。

1、曲面/椭圆投影效果:

代码如下：

.shadow_wrap{

width: 100%;background:#E6EEF6;max-width: 600px;margin: auto;overflow: hidden;

}

.shadow1{

background-color: #9ecf68;

}

.shadow2{

background-color: #00bcd4;

}

.shadow1,.shadow2{

position:relative;

width:40%;

height:200px;

float:left;

margin:5% 15px;

border-radius:5px;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;

}

.shadow_wrap h3{

width:87%;

height:100px;

margin-left:6%;

text-align:center;

padding-top:60px;

color:#fff;

}

/**styling shadows**/

.shadow1:before, .shadow1:after{

position:abso