Наиболее часто используемое решение закругление уголков прямоугольного блока при верске это использование четырех картинок с круглыми углами.
Однако, такое решение имеет свои плюсы и минусы.
Из плюсов главный - возможность рисовать углы любой сложности и конфигурации.
Из недостатков – увеличение нагрузки на сервер, не лучший вид страницы при отключении отображения картинок.
Второе решение скругление уголков без использования изображений основано только на HTML и CSS. Такое решение используется в GMail-е.
Недостаток такого решения – некоторая корявость кода и пиксализация скругленных углов.
Код:
<style type="text/css">
div {}
.RC-container {
color: Azure;
}
.RC-content {
background-color: Azure;
color: Blueviolet;
padding: 5px;
}
.RC-1, .RC-2, .RC-3, .RC-4 {
background-color: Azure;
color: Blueviolet;
height: 1px;
font-size: 1px;
overflow: hidden;
}
.RC-1 {
margin: 0 5px;
}
.RC-2 {
margin: 0 3px;
}
.RC-3 {
margin: 0 2px;
}
.RC-4 {
margin: 0 1px;
height: 2px;
}
</style>
<div style="width: 300px;">
<div class="RC-container">
<div class="RC-1"> </div>
<div class="RC-2"> </div>
<div class="RC-3"> </div>
<div class="RC-4"> </div>
</div>
<div class="RC-content">Попробуйте этих мягких булочек...<br>Попробуйте этих мягких булочек...<br>:-)</div>
<div class="RC-container">
<div class="RC-4"> </div>
<div class="RC-3"> </div>
<div class="RC-2"> </div>
<div class="RC-1"> </div>
</div>
</div>
А вот как это выглядит на практике:
Попробуйте этих мягких булочек...
Попробуйте этих мягких булочек...
:-)
Принцип формирования - создание блоков высотой 1px и последоватьльное расширение/сужение их по горизонтали.
Группа: Гости
Регистрация: --
Статус: