Таких блоков целое множество. Однако их метод отличается от моего. Хотя бы тем, что мой состоит из html и css кода, а другие еще с картинками. Возможно вы скажите что мой метод некрасив, неаккуратен и т. п. Однако такой метод может пригдится.. Его можно усовершенствовать!
Чтобы не лить воду в уши, лучше я закомментирую строки и вы увидете что, где, для чего.
Вот, смотрите:
ul {width:23%;list-style:none;}
ul li {margin-bottom:8px;}
/* Nav Style */
.nav a {
display:block; /* Устанавливаем все на одном месте */
border: solid #666; /* Создаем обводку. Замедьте, цифровое значение не указано! */
border-width:0 1px; /* Делаем само закругление */
text-decoration:none;
color:#000;
background:#e4e4e4;
}
.nav a b {
display: block; /* См. выше */
position:relative; /* Позиционирование внутри родителя */
top: -1px; /* Вверх на один px */
left: 0; /* Значение 0 отступа слева */
border:solid #666; /**/
border-width:1px 0 0; /* Восстанавливаем верхнюю полосу border, которую мы убрали выше */
font-weight:normal; /* Убираем значение b, которое дано в html коде */
}
.nav a b b {
border-width:0 0 1px; /* Можно сказать, ставим наместо все бордеры! */
top: 2px; /* Отступ сверху 2px */
padding:1px 6px; /* Настраиваем как вам угодно */
}
.nav a:hover b {background:#666;color:white; } /* Фишка для ссылок */
<ul class="nav">
<li><a href="#"><b><b>Link1</b></b></a></li>
<li><a href="#"><b><b>Link2</b></b></a></li>
<li><a href="#"><b><b>Link2</b></b></a></li>
</ul>
Способ понятен? Если нет, могу объяснить. Кстати, его можно использовать для чего угодно! Например для текста.
Ответить | Цитировать
Ответить | Цитировать
Не понял, что за цыфровое значение? вы имели в веду толщину рамки?
По правилам КСС, в таком порядке не допустимо обьявлять свойства элемента, на первом месте всегда должна быть толщина рамки, а ее и вовсе нет. Т.е. валидацию такой код не пройдет 100% А как насчет кроссбраузерности, такие вот закругленные углы во всех браузерах поддержываются?
Ответить | Цитировать
На счет кроссбраузерности, то вроде нормально. Тестировалось под Оперой, ФФ, konqueror!
Ответить | Цитировать
Ответить | Цитировать