跟大家講解下有關如何使用css3實現圖片的簡單陰影效果（附完整代碼），相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說如何使用css3實現圖片的簡單陰影效果（附完整代碼），小編也收集到了有關如何使用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代碼比較簡潔，值得我們學習。<title>盒子陰影的CSS實現方法</title>
相關內容鏈接請查看本站內css3部分的視頻教程：
http://www.php.cn/course/list/14.html
以上就是如何使用css3實現圖片的簡單陰影效果（附完整代碼）的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網