Question

编辑：要完全清楚。我的主要兴趣是不 IE6，但我使用的任何解决方案都需要在IE6中工作，而不是看起来完全可怕。

这样一个解决方案，其中圆角在IE6中最终正方形将是好的。

在IE6中随机位置最终出现圆角的解决方案不合适。

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

有谁能告诉我如何通过这个工具调整CSS输出，以便div只有一个边框（没有填充）？此刻你会得到一个坚固的颜色块（本例中为黑色）。

我对完全不同的技术持开放态度，但必须是无图像的，并且必须合理地降级IE6（'合理地'包括没有圆角但仍然得到一个盒子）

我尝试将'background-color'改为'继承'，但后来我丢失了盒子的左右两侧。

示例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

jQuery UI在将半径应用于边框方面做得非常出色，使用原生CSS：

/* Individual Corners */
.ui-corner-tl {
  -moz-border-radius-topleft: 4px/*{cornerRadius}*/;
  -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; 
  border-top-left-radius: 4px/*{cornerRadius}*/; 
}
.ui-corner-tr { 
  -moz-border-radius-topright: 4px/*{cornerRadius}*/; 
  -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; 
  border-top-right-radius: 4px/*{cornerRadius}*/; 
}
.ui-corner-bl { 
  -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; 
  -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; 
  border-bottom-left-radius: 4px/*{cornerRadius}*/; 
}
.ui-corner-br { 
  -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; 
  -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; 
  border-bottom-right-radius: 4px/*{cornerRadius}*/; 
}

/* All Corners */
.ui-corner-all {
  -moz-border-radius: 4px/*{cornerRadius}*/; 
  -webkit-border-radius: 4px/*{cornerRadius}*/; 
  border-radius: 4px/*{cornerRadius}*/; 
}

然后，您可以设置border或border-color以仅对其应用边框。

有关更多样式，请参阅jQuery-UI Themes.css文件。

Answer 2

目前，只有FireFox（-moz-border-radius: 5px;）和Chrome（-webkit-border-radius: 5px;）才能掌握边框半径。

有些脚本可以在IE中实现相同的效果，但是它们并不是那么好。主要是当图案作为背景图像时。让我们举一个例子，你有一个模式作为背景图像和固体块容器顶部有圆形边框。该脚本确实会生成边框，但角落将是纯色而不透明。

然而，有一种方法！它被称为CSS3 PIE。一开始学习使用它是一场噩梦。但是，如果你让它工作......这将是最终的解决方案！ CSS3 PIE会为您的角添加半径并保持角落背景透明。此外，它在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>

Answer 3

说真的......用border-radius！我认为拥有大量代码并不是一件好事，只会对古老的浏览器产生很好的效果......

Answer 4

这是我能得到的最接近的：P

.spiffy1 {
  margin-left: 4px;
  margin-right: 4px;
  padding-left: 1px;
  padding-right: 1px;
  border-left: 1px solid #919191;
  border-right: 1px solid #919191;
  background: #3F3F3F;
}
.spiffy2 {
  margin-left: 2px;
  margin-right: 2px;
  padding-right: 1px;
  padding-left: 1px;
  border-left: 2px solid #303030;
  border-right: 2px solid #303030;
  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;
}

<div style=" height:100px; border: 1px solid black; border-width: 0px 1px;">

CSS圆角没有图像，没有填充颜色？

4 个答案: