怎么使用css3阴影box shadow

本篇内容介绍了“怎么使用css3阴影box shadow”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　css3阴影曲面/椭圆投影效果:

　　代码如下：

　　<style>

　　.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;

　　css3阴影悬浮投影效果:

　　悬浮投影

　　实现代码：

　　<style>

　　.shadow_wrap{

　　margin-top:50px;margin-bottom:10px;

　　}

　　.floating{

　　width:60%;max-width:180px;height:150px;line-height:150px;background:#ff9800;color:#fff;text-align:center;cursor:pointer;

　　position:relative;transform:translateY(0);transition:transform1s;

　　}

　　.floating:after{

　　content:"";

　　display:block;

　　position:absolute;

       }

“怎么使用css3阴影box shadow”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！