Eu adicionei umbox-shadow para uma seção de uma página recentemente para dar o mesmo efeito de borda de sombra que é visto em aplicativos do Mac OS X. Parecia ótimo, mas percebi que deslizar para cima e para baixo na página fazia com que ficasse lento. Eu normalmente só vejo isso em páginas que têm imagens de fundo irritantes e toneladas de imagens e vídeos embutidos espalhados por toda parte (tosse tosse MySpace). Originalmente, decidi usar box-shadow, pois concluí que isso removeria a necessidade de usar uma imagem, o que eliminaria qualquer possibilidade de atraso de rolagem.

Eu sei que o CSS3 ainda é novo, mas este é o motivo do atraso? A sombra está sendo renderizada por software ou algo do tipo? Quando eu aplico a sombra da caixa a elementos menores, ela não fica atrasada. Eu só estou querendo saber se alguém já experimentou isso.

Eu apenas tentei na página inicial do Stack Overflow, no#content div usando o Firebug com uma configuração de:

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

E eu notei algum atraso de rolagem depois. Eu estou usando o Firefox 3.5.

Minha pergunta é, quais são algumas alternativas para usar esse atributo se eu quiser adicionar uma borda de estilo do Mac OS X a uma seção da minha página?

Em uma nota lateral, alguém sabe se é possível aplicar a sombra da caixa apenas nos lados superior, esquerdo e direito do elemento e não na parte inferior? eu tentei1px -1px 10px mas ainda mostra a sombra no fundo. Se eu continuar diminuindo o segundo deslocamento, ele eventualmente removerá a sombra do fundo, mas então a sombra superior será agora mais escura e maior.

E sim, eu vi os artigos na caixa-sombra em: