Css box shadow + прозрачные фоновые изображения = интуитивно понятный пробой

  • У меня есть изображение кнопки, которое я использую в качестве фонового изображения для некоторых ссылок.
  • Фоновое изображение имеет закругленные углы.
  • Я хочу использовать теневую тень css вместо того, чтобы помещать тень в изображение

Проблема заключается в том, что тень появляется вокруг элемента. Хотя я как бы ожидал увидеть цвет теневой тени через прозрачные части фонового изображения, вместо этого я вижу цвет фона (см. Этот jsfiddle).

Моя фактическая цель немного сложнее, но если я смогу насытить первые три балла, тогда я смогу прибить эту задачу. В частности, я хочу использовать два вложенных элемента с фоновыми изображениями правой и левой частей изображения кнопки (закругленные углы), чтобы я мог использовать один и тот же css для обертывания 'button' вокруг текста любой длины. Поскольку фоны перекрываются в стиле "раздвижных дверей" css, капля тени png alpha показывает 2x темную секцию, где изображения перекрываются. Soo.. Я думал, что использую тень css, но, как вы можете видеть в jsFiddle, есть проблемы и с этим.

Любые идеи?

ОТВЕТЫ

Ответ 1

Коробчатые тени не отображаются через прозрачные фоны. Более простой тестовый пример:

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: transparent;
  box-shadow: 0 0 10px #000;
}​

Ожидаемый результат будет хорошим размытым черным квадратом справа? Ну... нет, это белый квадрат с каплей. http://jsfiddle.net/UjhrW/

Чтобы достичь того, что вы хотите сделать, вам понадобится отдельная разметка для dropshadow, залейте ее белым цветом, а затем установите разлив тени, чтобы он выглядел как размытый квадрат...

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}​

http://jsfiddle.net/Etmty/