Как сделать блок с закругленными углами только на CSS

Разместил / Просмотров: 13 104 / комментарий 21

И снова здравствуйте дорогие читатели блога. Сегодня мы попытаемся сделать красивые и простые блоки с закругленными углами только при помощи CSS. Говорю сразу, тут ничего сложного нет, всего лишь потребуется минимальное знание CSS и конечно же знать куда и где его прилепить :-)

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

Ну а сейчас давайте всё таки посмотрим как они делаются.

Создание блока

Для начала нам нужно создать самый обычный блок, которому дадим переменную например Box, её мы будем позже использовать в теге <div>:

.Box {

width:700px; /* Ширина блока */
height: 200px; /* Высота блока */

}

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

Оформление блока

Теперь давайте сделаем красивый вид блоку, а именно добавим тень и закруглим углы:

.Box {

width:700px; /* Ширина блока */
height: 200px; /* Высота блока */
background-color: #ffffff; /* Фоновый цвет*/
border: 2px solid #D4D4D4; /* Ширина и цвет границ*/
border-radius: 10px; /* Радиус границ*/
box-shadow: 0 0 15px #A9A9A9; /* Размер и цвет тени блока*/

}

Как видите, здесь тоже можно изменить все параметры по своему вкусу, изменить фоновый цвет, радиус границ, тень и её цвет. Главное экспериментируйте.

Пример

Ну а сейчас давайте применим это всё на практике. Например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">

          <style>

          body {
        background:#f0f0f0;
        font-family: Tahoma, sans-serif;
        font-size:14px;
        line-height:135%;
        margin-left: 20%;
        margin-top: 10%;
       }

.Box {
	margin-bottom:15px;
        width:668px;
        height: 200px;
        background-color: #ffffff;
        position:relative;
        border: 2px solid #D4D4D4;
        border-radius: 10px;
        box-shadow: 0 0 15px #A9A9A9;
        padding:20px 40px;
}

.Box1 {
	margin-bottom:15px;
        width:668px;
        height: 200px;
        background-color: #ffffff;
        position:relative;
        border: 2px solid #D4D4D4;
        border-radius: 30px;
        box-shadow: 0 0 15px #A9A9A9;
        padding:20px 40px;
}

.Box2 {
	margin-bottom:15px;
        width:668px;
        height: 200px;
        background-color: #ffffff;
        position:relative;
        border: 2px solid #D4D4D4;
        border-radius: 50px;
        box-shadow: 0 0 15px #0099FF;
        padding:20px 40px;
}

</style>

        </head>

<body>

<div class="Box">Радиус углов 10px</div>
<div class="Box1">Радиус углов 30px</div>
<div class="Box2">Радиус углов 50px и с голубым цветов тени блока</div>

</body>
</html>

Теперь обязательно посмотрите, что у меня получилось в примере.

Пример

Вот и всё, надеюсь, что объяснил всё ясно и доступно. Если Вам что то будет не понятно, обязательно спрашивайте в комментариях. До скорых встреч, друзья.

  • TgxLab

    К сожалению, а может и к счастью метод использует CSS3, и спецификация по стандартам еще не принята, пока все браузеры в том числе и всеми «любимый» IE не поддерживают, или частично поддерживают при помощи «костылей». Будем надеяться что в скором будущем мы сможем в полной мере использовать все возможности CSS3.

  • Не спорю, но сейчас уже почти все браузеры поддерживают CSS3. Мне кажется, что уже к концу 2012, эту технологию будут поддерживать все до единого браузеры в том числе и IE. Единственное, пользователи бывает забывают обновляться.

  • TgxLab

    Ниже статистика использования браузеров по данным OpenStat за январь 2012 года, как видите она не утешительна.
    Может кто-то и подумает, что я слишком пристрастен к неиспользованию IE, но пока в списке будут присутствовать 8 и 7 IE, думать о переходе на новые стандарты на мой взгляд слишком рано.

    Opera 11 19.45%
    Chrome 16 19.15%
    Microsoft Internet Explorer 8 12.8%
    Firefox 9 9.52%
    Firefox 8 4.84%
    Microsoft Internet Explorer 9 4.72%
    Firefox 3 4.49%
    Microsoft Internet Explorer 7 4.37%
    Chrome 12 2.1%

  • Спасибо большое информация пригодилась)))

  • Рад, что Вам понравилось :-)

  • Отличная статья, нашел что искал. Уже дано хотел сделать на некоторых своих сайтах закругленные углы контента. Автору зачёт!

  • Спасибо Вам огромное :-)

  • Спасибо большое. Попробовал — все получилось. В статье описан самый простой способ по скругленным углам.

  • Андрей, рад, что Вам всё понятно и пригодилось. Спасибо за комментарий :-)

  • Андрей

    У меня получается что каждый блог находится каждом абзаце .Как это исправить.

  • Андрей, попробуйте к блоку добавить display: inline-block;

  • Иван

    а куда лепить то?

  • Иван, куда фантазии хватит туда и лепите :-)

  • Иван

    неполучается(((((

  • Иван, что не получается?

  • Иван

    ну помогите мне прошу вас!я могу прислать вам мой css только скажите куда конкретно вставить,куда я только не вставлял неполучается.прошу вас.умоляю

  • Иван, делайте, как в статье у всех получается.

  • Иван

    а что нужно конкретно скопировать,я хочу чтобы у меня было как на втором рисунке

  • Вставьте в стили класс .Box1 (он полностью описан выше). Далее в коде html вставьте вот код с эти классом, он тоже выше описан под стилями

  • Иван

    неполучается

  • Иван, Вы наверное в ИЕ пытаетесь результат посмотреть?