Rumah > Artikel > hujung hadapan web > 如何使用css3实现图片的简单阴影效果(附完整代码)
上篇文章向大家展示了一下如何使用css3实现文字的阴影效果,本文将继续向大家展示如何实现图片的阴影效果,其中包含了两种特殊效果:曲面/椭圆投影效果和悬浮投影效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
使用css3实现图片的阴影效果的原理
一个图形需要带有一个主投影,另一个带有弧度的图形也有自己的阴影效果,让这两个图形发生重叠,让他们的颜色一致然后可以把弧度阴影露出来,这样看到的就是一个曲线阴影的效果。
text-shadow属性设置
水平偏移量,正值向右,负值向左。
垂直偏移量,正值向下,负值向上。
模糊度,不能为负值。
阴影的颜色。
使用css3实现曲面/椭圆投影效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>曲面/椭圆投影效果</title> <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; 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:absolute; content:""; bottom:12px;left:15px;top:80%; width:45%; background:#9B7468; z-index:-1; -webkit-box-shadow: 0 20px 15px #9B7468; -moz-box-shadow: 0 20px 15px #9B7468; box-shadow: 0 20px 15px #9B7468; -webkit-transform: rotate(-6deg); -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:after{ position:absolute; content:""; top:100px;bottom:5px;left:30px;right:30px; z-index:-1; box-shadow:0 0 40px 13px #486685; border-radius:100px/20px; } </style> </head> <body> <div class="shadow_wrap"> <div class="shadow1"> <h3>椭圆投影1</h3> </div> <div class="shadow2"> <h3>椭圆投影2</h3> </div> </div> </body> </html>
实现效果如图所示
使用css3实现悬浮投影效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>悬浮投影</title> <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: transform 1s; } .floating:after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s; } /*鼠标移上去的效果*/ .floating:hover { transform: translateY(-40px); transition: transform 1s; } .floating:hover:after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s; } </style> <body> <div class="shadow_wrap"> <div class="floating"> <h3>悬浮投影</h3> </div> </div </body> </html>
实现效果如图所示
总结
直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;第三个值(10px)是设置模糊距离;black就是阴影的颜色啦;最后一个inset是在元素内部创建一个阴影,也就是内阴影了;删除掉inset就是设置外阴影了。
这是使用纯CSS实现的效果,在DIV层的区域边框添加阴影效果,看上去非常形象,但是实现起来并不是太难,CSS代码比较简洁,值得我们学习。b2386ffb911b14667cb8f0f91ea547a7盒子阴影的CSS实现方法6e916e0f7d1e588d4f442bf645aedb2f
相关内容链接请查看本站内css3部分的视频教程:
http://www.php.cn/course/list/14.html
Atas ialah kandungan terperinci 如何使用css3实现图片的简单阴影效果(附完整代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!