怎么使用css3阴影box shadow
本篇内容介绍了"怎么使用css3阴影box shadow"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
css3阴影曲面/椭圆投影效果:
代码如下:
.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:5px;
border-radius:5px;
css3阴影悬浮投影效果:
悬浮投影
实现代码:
.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"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!