如何使用css3實現(xiàn)圖片的簡單陰影效果

1、如何使用css3實現(xiàn)圖片的簡單陰影效果用法css3實現(xiàn)的陰影效果的原理一個圖形需要帶有一個主投影，另一個帶有弧度的圖形也有自己的陰影效果，讓這兩個圖形發(fā)生重疊，讓他們的色彩全都然后可以把弧度陰影露出來，這樣看到的就是一個曲線陰影的效果。text-shadow屬性設(shè)置水平偏移量，正當(dāng)向右，負(fù)值向左。垂直偏移量，正當(dāng)向下，負(fù)值向上。含糊度，不能為負(fù)值。陰影的色彩。用法css3實現(xiàn)曲面/橢圓投影效果曲面/橢圓投影效果.shadow_wrapwidth:100%;background:e6eef6;max-width:600px;margin:auto;overflow:hidden;.shadow1

2、background-color:9ecf68;.shadow2background-color:00bcd4;.shadow1,.shadow2position:relative;width:40%;height:200px;float:left;margin:5%15px;border-radius:5px;box-shadow:01px4pxrgba(0,0,0,0.3),0020pxrgba(0,0,0,0.1)inset;.shadow_wraph3width:87%;height:100px;margin-left:6%;text-align:center;padding-top:

3、60px;color:fff;/*stylingshadows*/.shadow1:before,.shadow1:afterposition:absolute;content:""bottom:12px;left:15px;top:80%;width:45%;background:9b7468;z-index:-1;-webkit-box-shadow:020px15px9b7468;-moz-box-shadow:020px15px9b7468;box-shadow:020px15px9b7468;-webkit-transform:rotate(-6d

4、eg);-moz-transform:rotate(-6deg);transform:rotate(-6deg);.shadow1:after-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);transform:rotate(6deg);right:15px;left:auto;.shadow2:before,.shadow2:afterposition:absolute;content:""top:100px;bottom:5px;left:30px;right:30px;z-index:

5、-1;box-shadow:0040px13px486685;border-radius:100px/20px;橢圓投影1橢圓投影2實現(xiàn)效果所示微信截圖_20180926171418.png用法css3實現(xiàn)懸浮投影效果懸浮投影.shadow_wrapmargin-top:50px;margin-bottom:10px;.floatingwidth:60%;max-width:180px;height:150px;line-height:150px;background:ff9800;color:fff;text-align:center;cursor:pointer;position:rela

6、tive;transform:translatey(0);transition:transform1s;.floating:aftercontent:""display:block;position:absolute;bottom:-30px;left:50%;height:8px;width:100%;box-shadow:0px0px15px0pxrgba(0,0,0,0.4);border-radius:50%;background-color:rgba(0,0,0,0.2);transform:translate(-50%,0);transition

7、:transform1s;/*鼠標(biāo)移上去的效果*/.floating:hovertransform:translatey(-40px);transition:transform1s;.floating:hover:aftertransform:translate(-50%,40px)scale(0.75);transition:transform1s;懸浮投影實現(xiàn)效果所示微信截圖_20180926171824.png總結(jié)挺直用法box-shadow:5px5px10pxblackinset;屬性設(shè)置樣式樣式就可以了。前兩個值（5px5px）是水平和垂直方向的偏移量，正當(dāng)陰影就會向左向下偏移，負(fù)值反之；第三個值（10px）是設(shè)置含糊距離；black就是陰影的色彩啦；最后一個inset是在元素內(nèi)部創(chuàng)建一個陰影，也就是內(nèi)陰影