Выполнить прокрутку с помощью свойства CSS3 box-shadow?

Недавно я добавил box-shadow в раздел страницы, чтобы придать ему тот же эффект границы теней, что и в приложениях Mac OS X. Это выглядело отлично, но я заметил, что прокрутка вверх и вниз по странице заставила его отстать. Обычно я вижу это только на страницах, которые раздражают фоновые изображения и тонны изображений и встроенных видеороликов, оштукатуренных на всем протяжении (кашель MySpace кашель). Первоначально я решил использовать box-shadow, так как решил, что это устранит необходимость использования изображения, которое устранит любую возможность задержки прокрутки.

Я знаю, что CSS3 по-прежнему нова, но является ли это причиной задержки? Является ли тень программным обеспечением или чем-то еще? Когда я применяю тень окна к более мелким элементам, она не отстает вообще. Мне просто интересно, испытал ли кто-нибудь еще это.

Я просто попробовал это на первой странице, на div #content, используя Firebug с настройкой:

-moz-box-shadow: 1px 1px 10px;

И я заметил некоторое отставание прокрутки. Я использую Firefox 3.5.

Мой вопрос: какие альтернативы использовать этот атрибут, если я хочу добавить границу стиля Mac OS X в раздел моей страницы?

На боковой ноте кто-нибудь знает, можно ли применить тень окна только к верхней, левой и правой сторонам элемента, а не к нижней? Я попробовал 1px -1px 10px, но он все еще показывает тень внизу. Если я продолжаю уменьшать второе смещение, он в конечном итоге удаляет тень со дна, но затем верхняя тень теперь становится темнее и больше.

И да, я видел статьи на коробке-тени на:

Ответ 1

Лучше всего вместо этого использовать -moz-border-image. Это должно решить обе ваши проблемы.

Например, вы можете использовать изображение, подобное этому, , в сочетании с таким CSS

-moz-border-image: url(shadow.png) 10 / 10px;

создать свою тень. А так как вы используете изображение, вы также можете опустить нижнюю тень, если хотите.

Вы не сможете удалить тень снизу, используя -moz-box-shadow; это не называется "тень от коробки" даром. Это применяет тень ко всей коробке. Вы не можете указать тень для каждой стороны отдельно, как, например, с border. Лучшее, что вы можете сделать, это возиться с расположением, размытостью и распространением тени. Но это неизбежно приводит к более темной тени на противоположной стороне.

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

Ответ 2

Это было исправлено в webkit по состоянию на два дня назад.:)

https://bugs.webkit.org/show_bug.cgi?id=22102

Вы можете забрать хром каждую ночь, чтобы попробовать.

Я смотрел в FF3.6 и FF4 и не вижу там ужасной производительности прокрутки, поэтому он также может быть рассмотрен там.

Ответ 3

Проблема по-прежнему сохраняется в Chrome для Android с текущей даты. Некоторые комбо-теневые комбо приводят к плохой производительности прокрутки. В моем случае укладка двух вставных коробок-теней (например, сверху/снизу) приводит к описанной проблеме. Единственное решение, которое я могу предоставить, это сделать коробочные тени менее сложными и повторить попытку... это сработало для меня. Это неудовлетворительно, но да, вместо этого вы также можете использовать решение пограничного изображения или полностью удалить поврежденную коробку. Надеюсь, что это скоро исправится. Btw Android-версия Firefox больше не имеет проблем (для моего css3). Кроме того, настольные версии обоих браузеров в моем случае не затрагиваются.

Ответ 4

#shadow {
-moz-border-image: url(img.png) 10 / 10px; #Firefox under v15.0#
-webkit-border-image: url(img.png) 10 / 10px; #Safari, Chrome under v15.0, Android & iOS#
-o-border-image: url(img.png) 10 / 10px; #Opera under v15.0#
border-image: url(img.png) 10 / 10px; #IE v11+, other new Browser#
}

Передовая версия браузера для старого и нового браузера. Простой img: http://i28.tinypic.com/2njzkt1.png

стиль: исправлено для изображений, слишком перегруженных браузером производительности