Простая шкала CSS-шкалы

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

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

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

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

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

источник

2010-05-06 Naftuli Kay

Нужно ли округлить их для всех браузеров? Это возможно в CSS3 без изображений. Проверьте это [CSS3 Generator] (http://css3generator.com/). Я полностью отказался от закругленных углов, используя изображения. Прогрессивное усиление для выигрыша ... –

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

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

источник

2010-05-06 06:47:43 Kyle

Вы правы. CSS отстой прямо сейчас, очевидно, что JS - единственный способ сделать это: - | –

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

источник

2010-05-06 00:54:02 Jonathan

Все эти решения пытаются делать закругленные углы с использованием 5 изображений или меньше, то есть: это не жидкое решение. Есть ли другое место, о котором вы знаете, это позволит мне, только в CSS, разместить эти элементы? –

Дэн Седерхольм (www.simplebits.com) имеет хороший подход - http://simplebits.com/publications/bulletproof/code/ см. Образец кода для первого издания, глава 5. – Jonathan

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

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

источник

2010-05-06 01:13:59

Очень хорошие учебные пособия, мне нужно будет проверить из них: –

Простая шкала CSS-шкалы

ответ

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