Internet Explorer - все вокруг CSS Shadow - PullRequest
Новая
       79

Internet Explorer - все вокруг CSS Shadow

11 голосов
/ 20 октября 2011

Я рвал на себе волосы из-за этой проблемы, я хочу простую тень, которая обвивает весь элемент, кроме верхней части. Я получил его для работы в Firefox и Chrome без проблем. Но в IE есть такая странная настройка «направления», где 4 других числа определяют тень.

Может кто-нибудь помочь мне определить правильный CSS так, чтобы он имел тень вокруг всего элемента, кроме верха. 

/* 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')";

Ответы [ 4 ]

24 голосов
/ 20 октября 2011

Теневой фильтр является однонаправленным, а направление - это число от 1 до 360 градусов. Чтобы сгенерировать тень блока с возможностью смещения этой тени , вам потребуется использовать несколько фильтров тени: 

   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);

Это отсортировано сверху / справа / снизу / слева, и изменение силы на любой стороне изменит размер этой тени. Например, 2 5 5 10 создаст прямую тень, которая создает иллюзию высоты.

8 голосов
/ 02 октября 2012

Аналогично ответу выше (см. Примечание ниже): 

#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');
}

Важно: Имейте в виду, что в IE также есть ошибка, при которой тот же стиль применяется к дочерним элементам Поэтому, возможно, вам придется применить «счетчик» / «нулификатор».

Пример: 

#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');
}
5 голосов
/ 20 октября 2011

Попробуйте использовать фильтр "свечение":

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;}
0 голосов
/ 11 августа 2016

здесь есть решения: http://www.artlebedev.com/tools/technogrette/html/filters-in-ie/ объединяя фильтры свечения и размытия, которые выглядят значительно лучше, процитируем один из примеров кода на странице выше: 

.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;
}
...