Используя текущий CSS, а не CSS3, есть ли способ указать стиль пограничного типа, поскольку я хотел бы как-то подчеркнуть свое меню. В основном после границы, которая имеет закругленный край, а не закругленные углы.CSS Border Help
Спасибо.
С CSS 2.1 и ранее вы можете использовать двойной, , вставка или начало. Я собрал простой демо-файл, чтобы вы могли поиграть и протестировать различные стили границ, доступные вам.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Border Styles</title>
<style type="text/css" media="screen">
body { background: #999; }
div { background: #eee; float: left; margin: 10px; padding: 10px; height: 100px; width: 100px; }
.double { border: 4px double #ccc; }
.ridge { border: 4px ridge #ccc; }
.groove { border: 4px groove #ccc; }
.inset { border: 4px inset #ccc; }
.outset { border: 4px outset #ccc; }
</style>
</head>
<body>
<div class="double">double</div>
<div class="ridge">ridge</div>
<div class="groove">groove</div>
<div class="inset">inset</div>
<div class="outset">outset</div>
</body>
</html>
Вы не можете сделать закругленный угол без свойства border-radius CSS3 spec. Если вы хотите сделать это, вы должны использовать сценарий, например Modernizr, для предоставления альтернативной поддержки браузерам, которые не могут поддерживать CSS3.
'inset' и' outset' будут делать это, но это не будет * самый красивый результат *. : P +1 tho, для простого способа. – jolt
Не без изображений. И CSS3 можно было бы назвать текущим CSS, по крайней мере, с внедрением WebKit и, в меньшей степени, Gecko.
IE играет медленный темп догонялки тоже :)
Вы могли бы попытаться сделать приподнятую границу, имея несколько дочерних элементов, все с границей и с более светлым оттенком цвета, как вы достигнете за пределами границы ,
Кроме того, вы можете вызвать 1px вырезанные углы с отрицательными полями и CSS. Можно также утверждать, что вы можете делать закругленные границы без border-radius, но HTML и CSS довольно ужасающие (подумайте обо всех дочерних элементах с отрицательными полями и т. Д.)
IE9 нацелен на полную поддержку CSS2. Они хвастались об этом на своем сайте ... На своем веб-сайте они также отметили, что их конкуренты уже работают над CSS3 ... * Facepalm * ... Можно использовать «border-radius», но вы можете просто использовать таблицы ... потому что это, по крайней мере, намного легче работать с ... – Warty
@ItzWarty вы можете предоставить небольшой пример того, как добиться этого, используя таблицы - спасибо. – tonyf
Если бы вы могли представить пример, я мог бы собрать пример. – Warty
Возможно, что-то вроде ... эллипса? Как центральный узел в этой диаграмме? http://www.homeandlearn.co.uk/powerpoint/images/charts/7Slide6.gif – ZJR