CSS Border Help - PullRequest
Новая
       13

CSS Border Help

0 голосов
/ 26 июля 2010

Используя текущий CSS, а не CSS3, есть ли способ указать стиль границы повышенного типа, поскольку я хотел бы как-то подчеркнуть свое меню.В основном после границы, которая имеет закругленный край, а не закругленные углы.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 26 июля 2010

В 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>

Невозможно создать закругленный угол без свойства CSS3 spec border-radius.Если вы хотите сделать это, вы должны использовать скрипт типа Modernizr , чтобы обеспечить альтернативную поддержку браузеров, которые не могут поддерживать CSS3.

0 голосов
/ 26 июля 2010

Не без картинок. И CSS3 можно было бы назвать current CSS, по крайней мере, в реализации с WebKit и в меньшей степени Gecko.

IE тоже играет в медленном темпе:)

Вы можете попытаться создать приподнятую границу, имея несколько дочерних элементов, все с рамкой и более светлого оттенка, когда вы достигнете внешней границы.

Кроме того, вы также можете создавать углы с 1px-надрезом с отрицательными полями и CSS. Можно также утверждать, что вы можете сделать округлые границы без border-radius, но HTML и CSS довольно ужасны (вспомните все дочерние элементы с отрицательными полями и т. Д.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...