HTML - создание блока

Question

я должен создать блок, как это:

alt text http://img689.imageshack.us/img689/5397/samplek.png

Как я могу это сделать быстрее, используя CSS + HTML?

Answer 1

Вам необходимо создать 8 изображений с поддержкой прозрачности.

4 изображений для сторон: сверху, слева, справа, снизу

4 изображений для углов

Для средней части вы можете иметь DIV и залейте его цветом фона.

Если вы говорите о чистом CSS-способе, то вам нужно знать, что его текущее состояние не позволяет вам иметь ни круглые углы, ни тени в кросс-браузере.

Когда у вас есть изображения, которые вы можете склеить их вместе, как это:

<div style="background: url('/topleft.png') no-repeat;"> 
    <div style="background: url('/topright.png') right no-repeat;"> 
    <div style="background: url('/bottomleft.png') bottom no-repeat;"> 
     <div style="background: url('/bottomright.png') bottom right no-repeat;"> 

     <div style="padding: 0 5px; background: url('/top.png') repeat-x;"> 
      <div style="background: url('/bottom.png') bottom repeat-x;"> 
      <div style="position:relative; left: -5px; 
         background: url('/left.png') repeat-y;"> 
       <div style="position:relative; left: 10px; 
          background: url('/right.png') right repeat-y;"> 

       <div style="position:relative; right: 5px; 
          background: #fff68f;"> 
        We got it! 
       </div> 

       </div> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 

P.S. Да, это сумасшествие, я знаю.

P.S. # 2: Чтобы сделать его «быстрым», вы можете комбинировать их в каком-то основном изображении и использовать технику CSS sprites. Но для этого вам нужно разместить достаточное пустое пространство между изображениями (читайте статью, чтобы понять, почему), в противном случае эти 9 вложенных div могут взорваться еще дальше.

Answer 2

CSS3 дает вам несколько приятных вариантов, но большинство из них еще не поддерживается кросс-браузером (например, свойство -moz-border-radius).

Answer 3

Возможно, что-то вроде этого:

<div id="block"></div> 

<style type="text/css"> 
#block{ 
    background:transparent url(http://img689.imageshack.us/img689/5397/samplek.png) 0 0 no-repeat; 
    height:279px; 
    width:222px; 
} 
</style>