Простой CSS Scale-Nine Layout

Question

После всех этих лет я все еще не изучил макет CSS, так что терпите меня. Я пытаюсь создать контейнер с закругленными углами, который я создал в Photoshop. Фон контейнера белый, поэтому у меня есть восемь изображений: верхний левый угол, верхний, верхний правый угол, правый, нижний правый угол, нижний, нижний левый угол и левый.

На краях есть тень, так что да, мне нужно 8 сторон. Как бы я выложить это в CSS? Я пытался и с треском провалился, чтобы сделать это с помощью таблицы + CSS. Как бы я сделал это с помощью divs?

EDIT: Проще говоря, как бы я выложил что-то вроде псевдокода ниже

[IMG][IMG WIDTH="100%"][IMG]

Если я напишу это в HTML, мои изображения будут разделены на три строки. Как мне все это уместить на одной строке?

Answer 1

Мне нравятся уроки, которые были составлены Мэтью Джеймсом Тейлором. Эти учебники не сильно помогут с закругленными углами, но они отлично подходят для идей макета CSS.

http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths

Answer 2

Проверьте: Curvy Corners , это плагин jQuery, который будет смотреть на ваш CSS и находить любые свойства CSS3 для webkit: -webkit-border-radius: 10px; и округлять любые углы с этим свойством CSS в каждом браузере.

Я использую его для IE, и он прекрасно работает! Все, что вам нужно сделать, это добавить файл .js в ваш каталог и связать его внизу вашего HTML, и он сделает всю работу за вас:)

Answer 3

Есть множество способов сделать это, http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.