реализация пограничного изображения для старого браузера

Как реализовать пограничное изображение для старых браузеров?
У меня есть 8 изображений:
4 border images (border-top.gif, border-right.gif, border-bottom.gif, border-right.gif)
и 4 пограничных коннектора (внешняя часть коннекторов прозрачна , это важно): границы верхнего left.gif, границы верхнего right.gif, границы снизу right.gif, границы снизу left.gif, также у меня есть следующий код:реализация пограничного изображения для старого браузера

<div class"block"> 
    <div class="content">A lot of text with images and tables</div> 
    <div class="border-top"></div> 
    <div class="border-right"></div> 
    <div class="border-bottom"></div> 
    <div class="border-left"></div> 
    <div class="border-top-left"></div> 
    <div class="border-top-right"></div> 
    <div class="border-bottom-right"></div> 
    <div class="border-bottom-left"></div> 
</div>

любые решения CSS? если это необходимо, я могу добавить классы для разметки.
UPD: Я знаю, что это легко сделать с таблицей, но я хочу найти решение для div.
UPD2: изображения с градиентом, поэтому нет способа сделать это без изображений.

источник

2012-05-18 Andrey Koltsov

Вы создаете закругленные границы? Или просто регулярные границы? Я не понимаю, почему вы не могли использовать границу: 1px solid # 000; для регулярного ... в противном случае для раунда я бы предложил http://css3pie.com/ Все ли изображения прозрачны? –

Вы также можете посмотреть http://cssround.com/ –

Это действительно зависит от того, как ваша граница создана. В большинстве сценариев вам даже не нужны изображения, но в некоторых просто нет способа обойти его ... Также в старых браузерах я предполагаю, что вы имеете в виду IE6 и IE7 –

Предлагаю использовать спрайты CSS. Таким образом, вам не нужно тратить время на нарезку изображений. Разрешить объявление фоновой позиции CSS выполнить эту работу для вас.

См: http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

источник

2012-05-18 17:44:38

Я знаю о css спрайтах, но перед использованием спрайтов мне нужно сделать это без спрайтов, здесь будет 3 спрайта: 4_conners, top_bottom_border, left_right-border –

относительное позиционирование вашего контейнера (.block)

абсолютное позиционирование ваших угловых элементов DIV внутри контейнера.

<style type="text/css"> 
    .block { display:block;position:relative; } 
    .border-top-left { 
      display:block; 
      background-image:url(/folder/topleftcorner.png); 
      background-repeat:no-repeat; 
      width:10px; height:10px; /* size of your corner graphic above */ 

      /* this puts it where you want it */ 
      position:absolute; 
      top:0; 
      left:0; 

     } 
</style>

Использование из ...

 right:0; bottom:0

совпасть остальное устраивает

источник

2012-05-18 17:48:52

Я начал от него, но я не знаю, как поставить границы без углов, ammm Я знаю, как это сделать, но верхняя граница видна в прозрачной части conners. эта проблема в :( –

добавить z-index: 1, z-index: 2, чтобы соответствовать - (2 выше на странице, чем 1) в css, кажется вам, что вам нужно заказать (z-index) порядок стека z-index - наше 3-е измерение .. whahayyyy –

поэтому верхняя граница должна иметь ширину = 100% - 32px * 2 (32px - размер моих углов) –

реализация пограничного изображения для старого браузера

ответ

Смежные вопросы