是否有可能以某種方式在div的一邊只有插入框陰影？請注意，我在這裏討論插圖 box-shadow，而不是正常的外框陰影。僅在一側插入框陰影？

例如，在下面的JSFiddle中，您會看到插入的陰影出現在所有的四面，程度不同。

我怎樣才能讓它只顯示在頂部？或者至多隻在頂部和底部？

的jsfiddle：http://jsfiddle.net/ahmadka/KFrun/

HTML：

<div class="myDiv"> 
    <div class="text"> 
     Lorem ipsum .... 
    </div> 
</div>

CSS：

.box 
{ 
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000; 
    box-shadow: inset 0px 5px 10px 1px #000000; 
} 

.text 
{ 
    padding:20px; 
}

來源

2013-07-10 Ahmad

另一種（和完全可定製）的方式將是一個背景漸變... – vals

可能的重複[如何獲得左側和右側的盒子陰影]（http://stackoverflow.com/questions/11997032/how-to-get-box - 僅在左側 - 右側） – brichins

訣竅是第二.box-inner內，這是在寬度都比較大原版的 .box，box-shadow適用於此。

然後，向.text添加更多的填充以彌補增加的寬度。

這是邏輯的樣子：

box logic

而這裏的它是如何在CSS做：

使用最大寬度爲.inner-box不會造成.box得到更廣泛，並overflow確保剩下的就是剪裁：

.box { 
    max-width: 100% !important; 
    overflow: hidden; 
}

110％比父母要寬在孩子的情況下100％（例如，當父母.box具有固定寬度時應該是相同的）。緣陰性彌補寬度並引起該元件爲中心（而不是僅右側部分隱藏）：

.box-inner { 
    width: 110%; 
    margin-left:-5%; 
    margin-right: -5%; 
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000; 
    box-shadow: inset 0px 5px 10px 1px #000000; 
}

並添加在X軸上一些填充彌補更寬.inner-box：

.text { 
    padding: 20px 40px; 
}

Here's a working Fiddle.

如果檢查小提琴，你會看到：

.box .box-inner .text

來源

2013-07-10 14:06:15 casraf

如何在沒有代碼的情況下將鏈接發佈到小提琴？：O –

小代碼塊計數:) – casraf

男人！這真是太棒了！很酷：P –

這有點接近。

.box 
{ 
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000; 
    box-shadow: inset -1px 10px 5px -3px #000000; 
}

來源

2013-07-10 14:12:44 mohkhan

這就是我試過的！但他不想這麼做，所以沒有把它作爲答案！ :( –

哦好吧該死的... – mohkhan

大喜歡謝謝❤️ – mghhgm

試試吧，說不定有用...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9; 
        -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 
        -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9; 
        -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;

上述CSS，因爲你有在底部的一個框中的影子。
你可以更紅Here

來源

2013-09-27 09:49:27

152

這是你在找什麼。它有你想要陰影的每一面的例子。

見JS搗鼓更多的例子： http://jsfiddle.net/KFrun/171/

.top-box 
{ 
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); 
} 
.left-box 
{ 
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4); 
} 
.right-box 
{ 
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4); 
} 
.bottom-box 
{ 
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4); 
}

來源

2014-02-20 08:52:35

真棒需要這個，謝謝+1 – Loktar

很好的答案 - 有美好的例子的一切！ – Hanny

很好的例子，真的很有幫助謝謝 –

相當晚了一點，但是，這並不需要改變填充或添加額外的div一個重複的答案可以在這裏找到：Have an issue with box-shadow Inset bottom only。它說，「使用第四長度定義的傳播距離爲負值這往往被忽視，但所有主流瀏覽器都支持」

從回答者的fiddle：

box-shadow: inset 0 -10px 10px -10px #000000;

來源

2014-06-24 15:47:41 drkario

僅在一側插入框陰影？

回答

這是邏輯的樣子：

而這裏的它是如何在CSS做：

Here's a working Fiddle.

相關問題