文章/答案/技术大牛

发布

社区首页 >问答首页 >使用CSS2的CSS提升边框

问使用CSS2的CSS提升边框
EN

Stack Overflow用户

提问于 2010-07-26 07:48:43

回答 2查看 413关注 0票数 0

使用当前的CSS而不是CSS3，有什么方法可以指定凸起类型的边框样式吗？我想以某种方式强调一下我的菜单。基本上我想要的边框是圆角的，而不是圆角的。

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-07-26 08:15:04

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

没有CSS3等级库的border-radius特性，无法创建圆角。如果你想这样做，你应该使用像Modernizr这样的脚本来为不支持CSS3的浏览器提供替代支持。

票数 2

Stack Overflow用户

发布于 2010-07-26 07:53:16

没有图像就不行。CSS3可以被称为当前的CSS，至少在与WebKit的实现中是这样，在较小的程度上也是如此。

IE也在玩慢节奏的追赶游戏:)

您可以尝试通过拥有几个子元素来创建一个凸起的边框，所有这些子元素都有一个边框，并且在到达外部边框时颜色会变浅。

另外，你也可以用负边距和CSS造成1px的凹槽边角。也可以说你可以在没有border-radius的情况下制作圆角边框，但是HTML和CSS是非常可怕的(想想所有具有负边距的子元素等等)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3331480

复制

相似问题

问使用CSS2的CSS提升边框
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS2的CSS提升边框EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS2的CSS提升边框
EN