Internet Explorer - CSS Bóng Tất cả Xung quanh

Question

Tôi đã xé toạc tóc ra khỏi vấn đề này, tôi muốn có một cái bóng đơn giản xung quanh toàn bộ phần tử, bên cạnh phần trên cùng. Tôi nhận được nó để làm việc trong Firefox và Chrome mà không có vấn đề gì. Nhưng IE có cài đặt "hướng" kỳ lạ, nơi khác với 4 số để xác định bóng.

Ai đó có thể giúp tôi xác định đúng CSS để nó sẽ có bóng xung quanh toàn bộ phần tử bên cạnh phần trên cùng.

/* For Firefox and Chrome */ 
-moz-box-shadow: 0px 0px 7px #000; 
-webkit-box-shadow: 0px 0px 7px #000; 
box-shadow: 0px 0px 7px #000; 

/* for IE */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=600, Color='#000000')"; 

Answer 1

Bộ lọc bóng là theo một hướng và chỉ đạo là một con số từ 1 đến 360 độ. Để tạo ra một hộp bóng với khả năng bù đắp rằng bóng, bạn sẽ cần sử dụng nhiều bộ lọc bóng:

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180), 
    progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270); 

này được sắp xếp trên/phải/dưới/trái, và thay đổi sức mạnh trên bất kỳ một bên sẽ thay đổi kích thước của cái bóng đó. Ví dụ, 2 5 5 10 sẽ tạo ra một bóng đổ thẳng xuống mang đến ảo tưởng về chiều cao.

Answer 2

Hãy thử "phát sáng" bộ lọc thay vì:

http://msdn.microsoft.com/en-us/library/ms532995(v=VS.85).aspx

DIV.aFilter { 
    filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5); 
    width: 150px;} 

Answer 3

Tương tự như trên trả lời (xem Chú ý Dưới đây):

#boxContainer{ 
    filter: 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=0, Color='#000000'), 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=90, Color='#000000'), 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#000000'), 
     progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=270, Color='#000000'); 
} 

Chú ý: Hãy ghi nhớ đó cũng là một lỗi trong trình duyệt IE, nơi nó sẽ được áp dụng mà phong cách cùng phần tử con. Vì vậy, bạn có thể cần phải áp dụng một "counter"/"Nullifier" nếu bạn muốn.

Ví dụ:

#boxContainer button, #boxContainer div, #boxContainer span { 
    /* Nullify Inherited Effect - Set "Strength=0" */ 
    filter: 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#000000'), 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=90, Color='#000000'), 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=180, Color='#000000'), 
    progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=270, Color='#000000'); 
} 

Answer 4

có những giải pháp ở đây: http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ kết hợp ánh sáng và làm mờ bộ lọc mà trông đẹp hơn đáng kể, trích dẫn một trong những mẫu mã trên trang phía trên:

.shadowed .shadow-3 
{ 
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0) 
progid:DXImageTransform.Microsoft.Alpha(opacity=25) 
progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true'); 
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)" 
"progid:DXImageTransform.Microsoft.Alpha(opacity=25)" 
"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')"; 
color: #111111; 
top: -2px; 
left: -2px; 
}