Как заставить границу сливаться с фоновым изображением

Question

Вот как выглядят мои активные вкладки:

альтернативный текст http://img5.imageshack.us/img5/2783/picture22dl.png

Обратите внимание, что нижняя граница (которая соединяет активную вкладку с содержимым <div>) выглядит немного иначе, чем остальная часть вкладки.

Что здесь происходит, так это то, что цвет фона вкладки, цвет границы вкладки и содержимое <div> цвета границы - все #F58400, но активная вкладка имеет приятный градиентный фон y, который выглядит следующим образом:

http://img171.imageshack.us/img171/3368/uibginsetsoft30f584001x.png

Поскольку нижняя часть градиента светлее, чем #F58400, он сталкивается с нижней границей.

Как я могу это исправить? В идеале я хотел бы, чтобы фоновое изображение начиналось у нижней границы, хотя я полагаю, что я мог бы просто изменить цвет границы, чтобы он соответствовал самому светлому цвету градиента.

Answer 1

Сделайте вкладку прозрачной (с альфа-каналом), чтобы через нее показывался любой заданный фон.

Это также позволяет изменять цвет без загрузки нового изображения.

Answer 2

Вы пробовали:

#active_tab {border-bottom: 2px /* or whatever */ solid transparent; }

Это может позволить изображение просвечивать. Возможно, вам придется пропустить границу active_tab и расположить ее ближе к нижнему блоку контента.

<ч /> Отредактировано:

Я понимаю, что граница технически находится вне ее элемента, поэтому маловероятно, что фон будет или даже должен показываться через границу. Я также напоминаю, что есть средство, с помощью которого границу можно каким-то образом перемещать «внутри» границ элемента. Но я не могу вспомнить собственность.

Извините, что больше не могу помочь.