使用 CSS2 的 CSS 凸起边框-6ren

使用 CSS2 的 CSS 凸起边框

转载作者：太空宇宙更新时间：2023-11-04 05:30:43

使用当前的 CSS 而不是 CSS3，有什么方法可以指定凸起的字体边框样式吗？我想以某种方式强调我的菜单。基本上我追求的是具有圆边而不是圆 Angular 的边框。

最佳答案

在 CSS 2.1 和之前的版本中，您可以使用 double、ridge、groove、inset 或 outset。我整理了一个简单的演示文件，供您试用和测试可用的各种边框样式。

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