Поддержка вставки теней в окне Safari

Question

У меня на одном из моих веб-сайтов есть поле со следующим свойством:

-moz-box-shadow:inset 0 0 50px #ecf4de;
-webkit-box-shadow:inset 0 0 50px #ecf4de;
box-shadow:inset 0 0 50px #ecf4de;

Это дает коробке хороший градиент к центру. Однако Safari не поддерживает свойство inset, а IE вообще не поддерживает box-shadow. Я не могу использовать изображение для этого, потому что высота этого поля меняется для каждой ситуации.

Я не хочу использовать 3 изображения (одно для верхнего, повторяющееся для среднего и одно для нижнего), так как это может привести к очень грязному коду.

Итак, я спрашиваю, есть ли способ создать тень для рамки во всех браузерах.

РЕДАКТИРОВАТЬ: Кто-нибудь знает какой-нибудь фрагмент JavaScript, который мог бы сделать это? Просто интересно ...

Answer 1

Последняя сборка Webkit (и, вероятно, многие ранее) имеет поддержку inset. Вероятно, он попадет в Safari для следующего выпуска.

Однако вы не сможете сделать это на всех браузерах без трюка с тремя изображениями. В противном случае Internet Explorer не будет сотрудничать с вами.

При этом я не думаю, что вашей целью должно быть получение одинаковых результатов во всех браузерах. Я думаю, что вы должны получить приличные результаты во всех браузерах, но это нормально, что веб-страницы в Safari или Firefox выглядят лучше, чем в Internet Explorer 7. Кроме того, только веб-гики сравнивают визуализацию веб-страниц в разных браузерах.

Answer 2

Возможно, вам повезет больше с «Методом наложения», первым из методов Джордона Добсона здесь , который использует радиальные градиенты.

Но для него по-прежнему требуются высота и ширина изображения (особенно в Chrome).

/* Overlay Method */

figure.overlay::after{
  position:               absolute;
  top:                    0;
  bottom:                 0;
  left:                   0;
  right:                  0;
  content:                "";
  z-index:                2;

  pointer-events:         none; /* "all" disables mouse access to image */

/* Mozilla Setting */
  background-image:       -moz-radial-gradient(
    center, circle contain, rgba(0,0,0,0) 125px, rgba(0,0,0,.5) 250px
  );

/* Webkit Setting */
  background-image:       -webkit-gradient(
    radial, 50% 50%, 125, 50% 50%, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))
    );
}

Answer 3

inset Поддержка Safari 5.0

http://www.css3.info/preview/box-shadow/

Answer 4

Согласовано; честно говоря, я не стесняюсь оставлять свои страницы выглядящими более пустыми и блокированными в Internet Explorer, чем превосходные браузеры. Содержимое по-прежнему читаемо, доступно и доступно для навигации, но в браузере получается идеальный пиксель. Во всяком случае, это только даст Microsoft все больше стимулов для улучшения поддержки браузером CSS3.

Лично я думаю, что флаг inset является одной из самых удивительных функций, обещанных тенями box-box ... кроме придания элементам депрессивного, «вырезанного» эффекта, тени-врезки также можно использовать для создания светящиеся края и угловое затенение, эффект, который не может быть легко достигнут при использовании прямых градиентов фона (особенно с закругленными краями). Возможность вставлять тени открывает множество возможностей для веб-дизайна.

Знание того, что Safari не поддерживал его, заставило меня опасаться, что в какой-то момент его можно будет исключить из спецификации: Бог знает, что нет причин отбрасывать что-то настолько полезное. > _>