如何在元素的一側添加陰影框？

356

我需要在某個block元素上創建一個盒子陰影，但僅在其右側（例如）。我這樣做的方式是用box-shadow將內部元素包裹到padding-right和overflow:hidden;的外部元素中，因此陰影的其他三個邊都不可見。如何在元素的一側添加陰影框？

有沒有更好的方法來實現這一目標？像box-shadow-right？

編輯：我的意圖是創建只有的陰影的垂直部分。與規則background:url(shadow.png) 100% 0% repeat-y會做的repeat-y完全相同。

來源

2011-02-25 tillda

考慮樣式表在盒子陰影方面有限的工具，我認爲你的做法已經相當不錯了。它不太混亂，在語義方面影響相當小：只有一個無意義的div。 – Bazzz 2011-02-25 09:20:46

+10

這很有趣，因爲我在* Question *的內容中發現了我的問題的解決方案，而不是其中的一個* Answers *。 – 2012-06-26 20:46:24

這是一個很好的CSS側影：http://stackoverflow.com/a/20596554/1491212 – 2014-01-05 15:09:36

469

是的，你可以使用的box-shadow規則的影子傳播特性：

.myDiv 
 
{ 
 
    border: 1px solid #333; 
 
    width: 100px; 
 
    height: 100px; 
 
    -webkit-box-shadow: 10px 0 5px -2px #888; 
 
      box-shadow: 10px 0 5px -2px #888; 
 
}

<div class="myDiv"></div>

第四財產有-2px是影子蔓延，你可以用它來改變影子的擴散，使影子看起來只在一側。

此同樣使用該影子定位規則10px將其發送到正確的（水平偏移）和0px保持它的元素下（垂直偏移）

5px是模糊半徑:)

Example for you here。

來源

2011-02-25 09:18:52 Kyle

+10

謝謝你指出我不知道的東西，但我的意圖是創建*僅*垂直部分影子。完全一樣的背景：url（shadow.png）100％0％repeat-y會做。 – tillda 2011-02-25 09:30:32

啊哈好吧，這是儘可能接近我使用純CSS。儘管如此，我仍會將其留在這裏，以通知其他用戶關於影子傳播的信息。 :) – Kyle 2011-02-25 09:47:21

+1真棒。工作完美:) – 2011-04-30 12:33:16

這是我做的一點小事。

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1.創建<div class="one_side_shadow"></div>正確的，我想創建所述一個側框的陰影元件下方（在這種情況下，我想爲id="element"單側插入陰影從底部推出）

2.然後，我創建了一個常規的box-shadow，使用負的垂直偏移將陰影向上推到一側。

`box-shadow: 0 -8px 20px 2px #DEDEE3;`

來源

2012-06-08 12:08:22

我自制的解決方案，它易於編輯：

HTML：

<div id="anti-shadow-div"> 
    <div id="shadow-div"></div> 
</div>

CSS：

#shadow-div{ 
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */ 
    margin-left:0px; /* Set to 20px if you want shadow at the left side */ 
    margin-top:0px; /* Set to 20px if you want shadow at the top side */ 
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */ 
    box-shadow: 0px 0px 20px black; 
    height:100px; 
    width:100px; 
    background: red; 
} 

#anti-shadow-div{ 
    margin:20px; 
    display:table; 
    overflow:hidden; 
}

演示：
http://jsfiddle.net/jDyQt/103

來源

2012-06-21 07:46:55 Puyol

OP是單面影子。 – James 2012-08-03 18:28:33

編輯我的例子，所以它是一面。 – Puyol 2012-08-08 10:03:20

似乎以某種方式最直接的 - 只是容器div使我不高興的不知何故;） – BananaAcid 2014-12-30 09:25:58

這可能是一個簡單的方法

border-right : 1px solid #ddd; 
height:85px;  
box-shadow : 10px 0px 5px 1px #eaeaea;

分配這對任何DIV

來源

2013-02-16 15:26:28 madhairsilence

這是我的例子：

.box{ 
 
     
 
     width: 400px; 
 
     height: 130px; 
 
     background-color: #C9C; 
 
     text-align: center; 
 
     font: 20px normal Arial, Helvetica, sans-serif; 
 
     color: #fff; 
 
     padding: 100px 0 0 0; 
 
     -webkit-box-shadow: 0 8px 6px -6px black; 
 
      -moz-box-shadow: 0 8px 6px -6px black; 
 
       box-shadow: 0 8px 6px -6px black; 
 
    }

<div class="box"> 
 
</div>

來源

2013-08-02 18:45:04 Webpixstudio

這個網站幫助了我：https://gist.github.com/ocean90/1268328（注在那個網站上，左側和右側在本帖子發佈之後被顛倒......但是他們按預期工作）。 它們在下面的代碼中得到糾正。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Box Shadow</title> 

     <style> 
      .box { 
       height: 150px; 
       width: 300px; 
       margin: 20px; 
       border: 1px solid #ccc; 
      } 

      .top { 
       box-shadow: 0 -5px 5px -5px #333; 
      } 

      .right { 
       box-shadow: 5px 0 5px -5px #333; 
      } 

      .bottom { 
       box-shadow: 0 5px 5px -5px #333; 
      } 

      .left { 
       box-shadow: -5px 0 5px -5px #333; 
      } 

      .all { 
       box-shadow: 0 0 5px #333; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="box top"></div> 
     <div class="box right"></div> 
     <div class="box bottom"></div> 
     <div class="box left"></div> 
     <div class="box all"></div> 
    </body> 
</html>

來源

2013-11-22 01:44:32 ter24

div { 
border: 1px solid #666; 
    width: 50px; 
    height: 50px; 
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ; 
}

來源

2014-01-10 05:45:19

要獲得高達雙方你可以使用背景漸變僞元素被剪輯的效果。

header::before, main::before, footer::before, header::after, main::after, footer::after { 
    display: block; 
    content: ''; 
    position: absolute; 
    width:  8px; 
    height:  100%; 
    top:  0px; 
} 

header::before, main::before, footer::before { 
    left:  -8px; 
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); 
} 

header::after, main::after, footer::after { 
    right:  -8px; 
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); 
}

將爲通常構成文檔的元素的左側和右側添加一個很好的陰影效果。

來源

2014-06-14 13:03:48

演示將很酷:) – BananaAcid 2014-12-30 09:27:05

完美的解決方案，因爲它只添加陰影效果元素的一側而不會混淆標記。 – Liquinaut 2015-11-22 17:22:38

這是一個比接受的答案更好的解決方案 – 2015-11-25 16:48:16

我所做的是爲陰影創建一個垂直塊，並將其放置在我的塊元素應該位於的位置旁邊。然後，將兩個塊被包裹到另一塊：

<div id="wrapper"> 
    <div id="shadow"></div> 
    <div id="content">CONTENT</div> 
</div> 

<style> 

div#wrapper { 
    width:200px; 
    height:258px;  
} 

div#wrapper > div#shadow { 
    display:inline-block; 
    width:1px; 
    height:100%; 
    box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8) 
} 

div#wrapper > div#content { 
    display:inline-block; 
    height:100%; 
    vertical-align:top; 
} 

</style>

的jsfiddle示例here。

來源

2014-10-10 09:09:36

只需使用:: after或之前的僞元素來添加陰影。將它設爲1px並將其放在任何你想要的一面。下面是頂部的例子。

footer { 
 
    margin-top: 50px; 
 
    color: #fff; 
 
    background-color: #009eff; 
 
    text-align: center; 
 
    line-height: 90px; 
 
    position: relative; 
 
} 
 

 
footer::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 1px; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75); 
 
}

<footer>top only box shadow</footer>

來源

2017-01-14 22:35:43 shwnrgr

這裏最好的解決方案是，我可以通過這種方式更好地定製陰影。 – LocustHorde 2018-01-09 17:00:53

如何在元素的一側添加陰影框？

回答

相關問題