我怎樣才能在某些方面獲得盒子陰影？

0

box-shadow屬性允許網頁設計師輕鬆地在框元素上實現多個陰影（外部或內部），指定顏色，大小，模糊和偏移的值。

的屬性的語法如下：

box-shadow: none | <shadow> [ , <shadow> ]* 

<shadow> = inset? && [ <length>{2,4} && <color>? ]

例如;

box-shadow: 3px -3px 3px #000000; //Shadow towards North East direction.

檢查和試驗這裏... http://jsfiddle.net/jgsdS/

來源

2011-08-24 21:09:07

2

.element{box-shadow:0 -5px 10px #000}

第一個值是在X中的陰影的位置，第二是在Y的陰影的位置，第三是影子尺寸，第四顏色。

通過放置陰影尺寸的一半的負位置Y，您的元素底部不會有陰影。

來源

2011-08-24 20:53:57

+1

您可以增加第二個值（-5px）喜歡的東西（-8px），以減少下面的方框中的影子，但你會得到一個在頂部更大的陰影：S –

+0

關於部分邊界，你不能有邊框底部：沒有在您的標籤上？ – ebany

-1

看來這是不可能的（http://www.w3.org/TR/css3-background/#the-box-shadow），你必須嘗試一些長度值。

來源

2011-08-24 20:54:42 MatTheCat

0

你可以把你的箱子在一個又一個，較小，高度和寬度所定義，具有溢出隱藏，並用相對位置，你隱藏你不想要的影子。

來源

2011-08-24 21:17:36 ebany

1

這已被問及數百萬次。只需使用spread參數使其更小，然後移動它使其僅出現在一側。類似的問題在這裏：drop shadow only bottom css3

來源

2011-08-25 00:24:48

+0

完全正確。 :-) – Kyle

1

我還沒有找到一個體面的方式，可以在所有情況下工作。這裏有兩種方法：

1）http://jsfiddle.net/pGGXH/28/ - 使用填充+溢出來顯示陰影。

<div class="no-overflow"> 
    <div class="box">my box</div> 
</div> 

.no-overflow { 
    overflow:hidden; 
    padding:5px 5px 0 5px; 
} 
.box { 
    border:1px solid #000; 
    border-radius:5px; 
    box-shadow:0 0 5px #333; 
    padding:10px; 
}

2）http://jsfiddle.net/pGGXH/33/ - 採用堆疊邊框陰影（你可以得到多個邊界陰影的一個疊在另一個上面）

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

.box { 
    border:1px solid #000; 
    border-radius:5px; 
    box-shadow:0 10px 0 #fff, 0 0 5px #333; 
    padding:10px; 
}

邊框圓角這兩種解決方案不轉

但是很好。

來源

2011-08-25 07:58:27 easwee

我怎樣才能在某些方面獲得盒子陰影？

回答

相關問題