Граница изображения и обычная граница не работают вместе? - PullRequest
Новая
       32

Граница изображения и обычная граница не работают вместе?

0 голосов
/ 17 февраля 2012

У меня есть div с границей изображения, повторяемой вдоль оси y сверху. 

background:url(../shadow_left.png) repeat-y top left;
border:1px solid black;

проблема в том, что мой клиент ТРЕБУЕТ также границы в 1 пиксель вместе с фоновым изображением границы.

Если я просто добавлю 1px сплошную черную границу , она появится ПОСЛЕ границы фона-фона.

Поскольку background-border - это тень, мне нужна обычная граница 1px как раз перед ней, а не снаружи. В настоящее время он появляется снаружи, что делает его уродливым.

Есть идеи?

Спасибо

Ответы [ 2 ]

3 голосов
/ 17 февраля 2012

Пара вариантов, которые вы можете попробовать.

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

Во-вторых, вы можете добавить внутренний DIV к вашему текущему DIV. Внутренний DIV будет иметь содержимое и границу в 1 пиксель, а затем внешний DIV будет иметь фоновое изображение. вам нужно, чтобы внутренний DIV имел left-margin равной ширине с изображением, которое вы используете для тени.

Надеюсь, что имеет смысл

Вот образец

0 голосов
/ 17 февраля 2012

Вы можете попробовать использовать свойство css3 box-shadow: 

  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

Взято из CSS3 Пожалуйста!

Или вы должны добавить границу к теневому изображению.

...