Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 11. Закругление углов
Не нравится(-) 39 Нравится(+)
25-05-2008, 02:02 - GZ Design (Уроки CSS)
Урок CSS 11. Закругление углов

Этот урок CSS, расскажет Вам об одном из самых простых и удобных способов создания закруглённых углов.
Итак, попробуем сделать...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №11. Закругление углов
style.css - Набор стилей для урока
=============================================================
*/

.b1, .b2, .b3, .b4 {
     display:block; /* Задание отображения границ и углов */
     overflow:hidden; /* Задание отображения границ и углов */
}

.b1, .b2, .b3 {
     height:1px; /* Задание высоты границ и углов */
}

.b2, .b3, .b4 {
     background:#ffedbe; /* Задание цвета фона в пределах закругления */
     border-left:1px solid #00346e; /* Задание стилей левых углов */
     border-right:1px solid #00346e; /* Задание стилей правых углов */
}

.b1 {
     margin:0 5px; /* Задание отступов */
     background:#00346e; /* Задание цвета верхней и нижней границ */
}

.b2 {
     margin:0 3px; /* Задание отступов */
     border-width:0 2px; /* Задание ширины границы */
}

.b3 {
     margin:0 2px; /* Задание отступов */
}

.b4 {
     height:2px; /* Задание высоты границ и углов */
     margin:0 1px; /* Задание отступов */
}

.content {
     background:#ffedbe; /* Задание общего фона */
     border:0 solid #00346e; /* Задание стилей границ */
     border-width:0 1px; /* Задание ширины границ */
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<span class="b1"></span><span class="b2"></span><span class="b3"></span><span class="b4"></span>
<div class="content">
Содержание блока
</div>
<span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Вот так, сравнительно просто можно закруглить углы блоков без использования картинок.

Идея: Stu Nicholls
Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0,8 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 30563 раз(а) и написали 9 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июль 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!