使用css3實(shí)現(xiàn)圖片陰影效果的方法

發(fā)布時(shí)間：2020-09-14 11:46:42 來(lái)源：億速云閱讀：138 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)使用css3實(shí)現(xiàn)圖片陰影效果的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

使用css3實(shí)現(xiàn)圖片的陰影效果的原理

一個(gè)圖形需要帶有一個(gè)主投影，另一個(gè)帶有弧度的圖形也有自己的陰影效果，讓這兩個(gè)圖形發(fā)生重疊，讓他們的顏色一致然后可以把弧度陰影露出來(lái)，這樣看到的就是一個(gè)曲線陰影的效果。

text-shadow屬性設(shè)置

水平偏移量，正值向右，負(fù)值向左。
垂直偏移量，正值向下，負(fù)值向上。
模糊度，不能為負(fù)值。
陰影的顏色。

使用css3實(shí)現(xiàn)曲面/橢圓投影效果

<!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>

實(shí)現(xiàn)效果如圖所示

使用css3實(shí)現(xiàn)圖片陰影效果的方法

使用css3實(shí)現(xiàn)懸浮投影效果

<!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;
}
/*鼠標(biāo)移上去的效果*/
.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>

實(shí)現(xiàn)效果如圖所示

使用css3實(shí)現(xiàn)圖片陰影效果的方法

總結(jié)

直接使用box-shadow:5px 5px 10px black inset;屬性設(shè)置樣式樣式就可以了。前兩個(gè)值（5px 5px）是水平和垂直方向的偏移量，正值陰影就會(huì)向左向下偏移，負(fù)值反之；第三個(gè)值（10px）是設(shè)置模糊距離；black就是陰影的顏色啦；最后一個(gè)inset是在元素內(nèi)部創(chuàng)建一個(gè)陰影，也就是內(nèi)陰影了；刪除掉inset就是設(shè)置外陰影了。

這是使用純CSS實(shí)現(xiàn)的效果，在DIV層的區(qū)域邊框添加陰影效果，看上去非常形象，但是實(shí)現(xiàn)起來(lái)并不是太難，CSS代碼比較簡(jiǎn)潔，值得我們學(xué)習(xí)。<title>盒子陰影的CSS實(shí)現(xiàn)方法</title>

感謝各位的閱讀！關(guān)于使用css3實(shí)現(xiàn)圖片陰影效果的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

使用css3實(shí)現(xiàn)圖片陰影效果的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽