CSS圆 Angular 没有图像并且没有填充颜色？

Question

编辑:只是为了完全清楚。我的主要兴趣是不是 IE6，但无论我使用什么解决方案都需要在 IE6 中工作，而不是看起来完全丑陋。

因此，在 IE6 中将圆 Angular 变成方形的解决方案就可以了。

在 IE6 中圆 Angular 最终出现在随机位置的解决方案是不可行的。

---

我使用过这个工具/技术http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=000000&sz=5px生成一些简单的圆 Angular div。

谁能告诉我如何调整这个工具的CSS输出，使div只有边框(没有填充)？此时您会得到一个纯色 block (本例中为黑色)。

我愿意接受完全不同的技术，但必须是无图像的，并且必须对 IE6 进行合理降级(“合理”包括没有圆 Angular ，但仍然得到一个框)

我尝试将“背景颜色”更改为“继承”，但后来我丢失了框的左侧和右侧。

示例 css/html 如下:

<style type="text/css">
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#000000}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #919191;
  border-right:1px solid #919191;
  background:#3f3f3f}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5e5e5;
  border-right:1px solid #e5e5e5;
  background:#303030}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #303030;
  border-right:1px solid #303030;}
.spiffy4{
  border-left:1px solid #919191;
  border-right:1px solid #919191}
.spiffy5{
  border-left:1px solid #3f3f3f;
  border-right:1px solid #3f3f3f}
.spiffyfg{
  background:#000000}
</style>



<div>
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
    <!-- content goes here -->
  </div>

  <b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>

Answer 1

目前边框半径的实现仅在FireFox (-moz-border-radius: 5px;) 和 Chrome (-webkit-border-radius: 5px;) 中掌握>).

在IE中也有脚本可以实现同样的效果，但是效果不是很好。主要是当涉及到作为背景图像的图案时。 让我们举个例子，您有一个图案作为背景图像和顶部带有圆形边框的实心 block 容器。该脚本确实会生成边框，但 Angular 将是纯色且不透明。

但是，有办法!它叫CSS3 PIE 。刚开始学习使用它是一场噩梦。然而，如果你让它发挥作用......这将是最终的解决方案! CSS3 PIE将为您的 Angular 添加半径并保持 Angular 背景透明。此外，它在 IE6 中运行良好。

现在，据我了解..您只需要一个边框并且容器未填充。好吧，在 FireFox 或 Chrome 中尝试一下底部的演示。这是你的意思吗？如果是这样，那么仍然CSS3 PIE ，是您最好的选择!

<style>
#demo_container {
    /* The actual trick: */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    /* For making demo more fun: */
    border: 2px solid black;
    padding: 10px;
    margin: 10px;
}
</style>
<div id="demo_container">Stack Overflow</div>