只有一個方向的css3盒子陰影？

Question

我有一個插入框陰影的元素，但我只想要陰影在上面。

有沒有辦法只設置頂部的影子？我是否必須訴諸創造額外的元素來覆蓋側面陰影？

Answer 1

這在技術上是相同的答案@ChrisJ，對如何使box-shadow聽從你的命令更多的一些細節：

參考_{的*爲可選項目}：

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>; 

<spread-radius>需要爲負數<blur-radius>（以便其他模糊邊不會出現），然後您需要將<offset-y>向下等量：

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

它會給你一個橫跨元素頂部的單梯度帶。

Answer 2

盒子陰影在每個方向上偏移給定量的陰影。所以你需要x-offset爲0，y-offset爲負值。

此外，您必須使用模糊半徑和傳播半徑，以便陰影在左側和右側不可見。

實施例：

box-shadow: #777 0px -10px 5px -2px; 

見關於Mozilla Developer Network描述。

Answer 3

更好的方法是使用背景漸變，這裏是並排的。

http://jsfiddle.net/wh3L8/

Answer 4

這是我做的一點小事。

<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：0 -8px 20px 2px＃DEDEE3;

Answer 5

實施例：

box-shadow: 0 2px 0px 0px red inset; 

所述第一參數和第二參數指定陰影到x方向和y方向上的偏移量分別。 第三個參數指定模糊距離。 最後，第四個參數指定傳播距離。

僅指定具有所需偏移量的第二個參數可以獲得沒有側影的頂部陰影。

演示可以在這裏找到：對CSS3盒陰影http://jsfiddle.net/rEdBy/

一個很不錯的教程 - http://www.css3.info/preview/box-shadow/

Answer 6

也許嘗試使用的box-shadow：

box-shadow: h-shadow v-shadow blur spread color inset;

具有溢出-X：

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

使用overflow-x: hidden;和box-shadow: 0px 10px 16px -10px #000;

Answer 7

這是我的例子請再試一次

-webkit-box-shadow: 0 8px 6px -6px black; 
-moz-box-shadow: 0 8px 6px -6px black; 
box-shadow: 0 8px 6px -6px black;