УрокСпособы закругления уголков. 2 способ.

Предыдущий способ по созданию закругленных уголков хорош всем, кроме двух вещей. Данный метод позволяет справиться только с одной проблемой - большим количеством кода.

Новая задача: сделать блок с закругленными уголками с минимумом html-кода.

Закругляем уголки с помощью :before и :after

Такие элементы, как :before и :after существуют в css начиная с версии 2.0, однако они почему-то мало кому известны.

В общем, лучше на примере. Допустим, у нас есть такой контейнер:

<div class="box">Контент</div>

плюс этого метода в том, что больше HTML не будет! В исходном коде будет записано только это!!

Теперь по css'y:

Задаем требуемый фон для нашего блока:

.box {
    background: #D27B24;
    padding: 15px;
}

Однако без картинок все же не обойтись, их все равно придется вырезать таким же образом как и в предыдущем уроке.

Четыре полученные картинки навешиваем на элементы :before и :after

.box:before{
    content:url(img/tl.gif);
    background: url(img/tr.gif) no-repeat top right;
    height: 10px;
    display: block;
    margin: -15px -15px 13px -15px;
}
 
.box:after{
    content:url(img/bl.gif);
    background: url(img/br.gif) no-repeat right bottom;
    height: 10px;
    display: block;
    margin: 13px -15px -15px -15px;
}

Принцип работы
атрибут content позволяет задавать содержимое контейнера. Само собой, слева на право. Поэтому если мы укажем content'у фон картинку и высоту этого :before или :after равную высоте картинки, то она автоматически станет слева, и, соответственно сверху. А атрибут background задаётся без повторений (что и понятно, нафига нам безмерное количество уголков?). Затем указывается, как располагать картинку. Для :before это сверху справа (top right), а для :after это справа снизу (right bottom).

Этот способ работает во всех современных браузерах, однако как всегда IE 6—7 стоят особняком, в них данный метод не работает. Но чтобы сделать уголки и для них, придётся написать немного javascript.

Данный код лучше помещать в отдельный файл ie.css, который будет подключаться специально для IE.

.incut{
    zoom:1;
    behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = ' < span style="background: url(img/tr.gif) no-repeat 100% 0;height: 10px;display: block;margin: -15px -15px 13px -15px;"  <   < img src="img/tl.gif" alt="" /  <   < /span  <  ' + this.innerHTML + ' < span style="background: url(img/br.gif) no-repeat 100% 0;height: 10px;display: block;margin:13px -15px -15px -15px;"  <   < img src="img/bl.gif" alt="" /  <   < /span  <  ') : '');
}

Если в браузере пользователя будет отключена поддержка JS он просто увидит фон который вы задали для блока, т.е. контент будет донесен до пользователя.

Кстати, в качестве фона можно задать картинку.

Плюсы:

• мало кода
• не сложен в использовании

Минусы:

• для IE приходится писать дополнительный код
• если у пользователя в IE отключена поддержка скриптов то углы будут без закруглений
• иногда может потребоваться время, чтобы правильно настроить уголки

Теперь вы знаете 2 способа закругления уголков у контейнеров. В следующем уроке я расскажу самый "крутой", но и самый тяжёлый для понимания способ закругления.