CSS陰影DIV

的四面我想在CSS實現這一點 - 因爲我希望它所有的瀏覽器 bg with shadows on all sides http://img831.imageshack.us/img831/5339/27900717.png CSS陰影DIV

即包含分區的內容支持，對每一側的陰影不會CSS3。頂部區域將用於導航。我已經搜索了教程，但迄今無濟於事。幫幫我！

來源

2010-08-12 Sean McRaghty

傷心，但IE不顯示用CSS做的陰影。你需要創建圖像作爲陰影（一些GIF，IE6不顯示alpha通道的PNG文件） – Ventus 2010-08-12 12:15:37

這是一個動態框...意思是寬度/高度每一個變化取決於內容？ – Hristo 2010-08-12 13:20:55

對於跨瀏覽器兼容性僅使用CSS的陰影...檢查這些鏈接
http://dev.opera.com/articles/view/cross-browser-box-shadows/
http://coolhomepages.com /How-to-make-easy-gradient-shadow-CSS-DIV-boxes/blog-48.html – Lemdor 2012-10-14 09:58:52

正如Ventus所說不可能使用css陰影與ie（僅ie9）。但您可以使用shadowOn。這是一個很棒的jQuery插件，使用起來非常簡單。有了它，你將有跨瀏覽器兼容性。

來源

2010-08-12 12:48:32 Sotiris

您必須創建多個圖像。一個用於左側。一個是正確的。一個爲底部等，然後有幾個div，併爲他們每個人設置背景。

來源

2010-08-12 12:13:21 Knarf

您可以用三個div的做到這一點，假設他們都是相同的（固定的）寬度：

<div class='top'> 
</div> 
<div class='middle'> 
<p>Hello World!</p> 
</div> 
<div class='bottom'> 
</div> 

.top{ 
    background:url('top.png'); 
    height:20px; 
    width:800px; 
} 
.middle{ 
    background:url('middle.png') repeat-y; 
    width:800px; 
    } 
.bottom{ 
    background:url('bottom.png'); 
    height:20px; 
    width:800px; 
}

來源

2010-08-12 12:20:52 fredley

或者，也可以使一個大的圖像，並用其作爲背景的整個內容區域;然後對包含的元素的位置和大小進行硬編碼。

來源

2010-08-12 12:21:49 tdammers

CSS3pie是一個工具，可以讓你在IE中使用一些css3屬性。

你想要做的是在較新的瀏覽器中使用相當普遍的css3，並且可以在IE中使用.htc文件很好地模擬（並且很容易），你可以從那裏下載.htc文件。

至於標記，例如，我看到只有2個元素，其中最上面的元素右移。你必須玩z-index來隱藏多餘的陰影。在那個網站中也有一個非常相似的效果，你應該能夠適應你的需求。

來源

2010-08-12 12:30:54 Razor

很好的參考。我已經在幾個月前使用過它，但由於某些原因，我離開了它。謝謝你提醒它！ – Sotiris 2010-08-12 13:45:41

這應該在所有的瀏覽器：

 

    .allSidesShadow { 
     box-shadow: 2px 2px 19px #aaa; 
     -o-box-shadow: 2px 2px 19px #aaa; 
     -webkit-box-shadow: 2px 2px 19px #aaa; 
     -moz-box-shadow: 2px 2px 19px #aaa; 

     /* For IE 5.5 - 7 */ 
     /* for IE4 - IE7 */ 
     filter: 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4), 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4), 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4), 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4); 
     -ms-filter: " 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4), 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4), 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4), 
      progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4) 
     "; 
    }

來源

2011-08-03 00:27:37 Ivelin

盒陰影適用於所有近代[IE> 8]的瀏覽器，該代碼使用沒有圖像和低於9

在IE版本的所有瀏覽器上運行

box-shadow:2px 2px 10px 10px #C9C9C9; 
-webkit-box-shadow:2px 2px 10px 10px #C9C9C9; 
-moz-box-shadow:2px 2px 10px 10px #C9C9C9; 

    /* For IE<9 */ 
    filter: 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5), 
    progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);

從IE 9開始支持的箱影。

來源

2011-10-25 10:58:27 VKGS

box-shadow在IE8中不起作用。 – certainlyakey 2012-12-23 20:45:23

@certainlyakey感謝您指出，我已更新樣式，以使其在IE中工作。 – VKGS 2013-01-10 10:19:15

只有最後一個過濾器正在申請我。爲了在IE8中爲我工作，我必須刪除逗號。根據MSDN的以下文章，它們被一個空格分隔，而不是一個逗號：http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx – knighter 2015-03-09 20:59:36

發表謝卡爾答案，需要一點點的編輯，

box-shadow:2px 2px 10px 10px #C9C9C9; 
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9; 
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

在IE這個多年平均值的工作（我查了IE8）。

來源

2012-07-20 06:08:09

box-shadow: inset 0 0 3px 0 #000;

表示0像素左，0像素右，3像素模糊，0像素漫反射，使用比BG稍暗的顏色。

來源

2014-08-14 18:38:44 yPhil

我現在不能看到你的照片，但對所有的側陰影我用下面的代碼：

box-shadow: 0 0 5px 0 #000;

取而代之的5px的使用尺寸。

來源

2014-09-20 13:26:55

您可以將下面的代碼放在div中，以便在所有四面都放置陰影。

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1); 
box-shadow: 0 0 10px rgba(0,0,0,.1);

來源

2015-10-03 08:39:31

下線對我有用。我使用了尺寸爲600x600的圖片。

-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;

來源

2016-12-17 07:27:39

回答

相關問題