溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關使用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 h4{
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">
<h4>橢圓投影1</h4>
</div>
<div class="shadow2">
<h4>橢圓投影2</h4>
</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">
<h4>懸浮投影</h4>
</div>
</div
</body>
</html>實現效果如圖所示
總結
直接使用box-shadow:5px 5px 10px black inset;屬性設置樣式樣式就可以了。前兩個值（5px 5px）是水平和垂直方向的偏移量，正值陰影就會向左向下偏移，負值反之；第三個值（10px）是設置模糊距離；black就是陰影的顏色啦；最后一個inset是在元素內部創建一個陰影，也就是內陰影了；刪除掉inset就是設置外陰影了。
這是使用純CSS實現的效果，在DIV層的區域邊框添加陰影效果，看上去非常形象，但是實現起來并不是太難，CSS代碼比較簡潔，值得我們學習。<title>盒子陰影的CSS實現方法</title>
感謝各位的閱讀！關于使用css3實現圖片陰影效果的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
