Daki
... xhtml mobile? Только чтобы без графики и множества div'ов?
01 Фев 2011, 19:25trysikov
<div id="rounded-box-3">
<b class="r3"></b><b class="r1"></b><b class="r1"></b>
<div class="inner-box">
<h3>Элемент с закругленными углами R=3px</h3>
<p>Этот способ закругления углов подсмотрен на GMail.</p>
</div>
<b class="r1"></b><b class="r1"></b><b class="r3"></b>
</div>
Дальше все просто, делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.
.r1, .r2, .r3 {
display: block;
height: 1px;
}
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
Затем указываем цвет фона и отступы
#rounded-box-3 .inner-box, #rounded-box-3 b {
background-color: #CCCCCC;
}
.inner-box {
padding:1em;
}
Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden
Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7, добавим правило font-size:1px
.r1, .r2, .r3 {
overflow: hidden;
font-size:1px;
}
Скитч
в файле css в див вставте это -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; и всё
02 Фев 2011, 16:44trysikov
вот ещо способ нашол
в цсс пишем
.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; /* Задание ширины границ */
}
в хтмл пишем
<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>
Скитч
у меня с телефона(Nokia 5228) всё норм, наверно не прокатит токо с Internet Explorer
02 Фев 2011, 16:58Felis
все варианты полное говно. если браузер не поддерживает css3, то надо отказаться от этого браузера.
02 Фев 2011, 18:20