Fatal编程技术网
  • css/
  • CSS圆角没有图像和填充颜色？

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

css html

CSS圆角没有图像和填充颜色？,css,html,rounded-corners,Css,Html,Rounded Corners,编辑：只是为了完全清楚。我的主要兴趣是而不是IE6，但是我使用的任何解决方案都需要在IE6中工作，而不需要看起来非常可怕 因此，在IE6中，圆角最终变成正方形的解决方案是不错的 在IE6中，圆角最终位于随机位置的解决方案是不可行的 我用这个工具/技术制作了一些简单的圆角div 有谁能告诉我如何通过这个工具调整CSS输出，使div只有一个边框（没有填充）？此时，您会得到一个实心的颜色块（本例中为黑色） 我对完全不同的技术持开放态度，但必须是无图像的，并且必须对IE6进行合理降级（“合理”不包括圆

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

因此，在IE6中，圆角最终变成正方形的解决方案是不错的

在IE6中，圆角最终位于随机位置的解决方案是不可行的

我用这个工具/技术制作了一些简单的圆角div

有谁能告诉我如何通过这个工具调整CSS输出，使div只有一个边框（没有填充）？此时，您会得到一个实心的颜色块（本例中为黑色）

我对完全不同的技术持开放态度，但必须是无图像的，并且必须对IE6进行合理降级（“合理”不包括圆角，但仍然有一个方框）

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

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>


.spiffy{display:block}
斯皮菲先生*{
显示：块；
高度：1px；
溢出：隐藏；
字体大小：.01em；
背景：#000000}
spiffy1先生{
左边距：3倍；
右边距：3倍；
左侧填充：1px；
右侧填充：1px；
左边框：1px实心#9191；
右边框：1px实心#9191；
背景：#3f3f}
spiffy2先生{
左边距：1px；
右边距：1px；
右侧填充：1px；
左侧填充：1px；
左边框：1px实心#e5；
右边框：1px实心#e5；
背景：#303030}
spiffy3先生{
左边距：1px；
右边距：1px；
左边框：1px实心#303030；
右边框：1px实心#303030；}
.斯皮菲4{
左边框：1px实心#9191；
右边框：1px实心#919191}
斯皮菲先生{
左边框：1px实心#3f3f；
右边框：1px实心#3f3f}
spiffyfg先生{
背景：#000000}
严肃地说。。。使用
边界半径
！我不认为有很多代码是件好事，只是对一个古老的浏览器有很大的影响…

说真的。。。使用
边界半径
！我不认为有很多代码是一件好事，只会对一个古老的浏览器产生巨大的影响…

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}*/; 
}
然后，您可以设置
边框
或
边框颜色
，使其仅应用边框

查看该文件以了解更多样式。

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}*/; 
}
然后，您可以设置
边框
或
边框颜色
，使其仅应用边框

查看文件了解更多样式。

这是我能得到的最接近的样式：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;">

.spiffy1{
左边距：4倍；
保证金权利：4px；
左侧填充：1px；
右侧填充：1px；
左边框：1px实心#9191；
右边框：1px实心#9191；
背景#3f3f；
}
spiffy2先生{
左边距：2倍；
右边距：2px；
右侧填充：1px；
左侧填充：1px；
左边框：2个实心#303030；
右边框：2px实心#303030；
背景:#303030；
}
spiffy3先生{
左边距：1px；
右边距：1px；
左边框：1px实心#303030；
右边框：1px实心#303030；
}
.斯皮菲4{
左边框：1px实心#9191；
右边框：1px实心#9191；
}
斯皮菲先生{
左边框：1px实心#3f3f；
右边框：1px实心#3f3f；
}
这是我能得到的最接近的：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;">

.spiffy1{
左边距：4倍；
保证金权利：4px；
左侧填充：1px；
右侧填充：1px；
左边框：1px实心#9191；
右边框：1px实心#9191；
背景#3f3f；
}
spiffy2先生{
左边距：2倍；
右边距：2px；
右侧填充：1px；
左侧填充：1px；
左边框：2个实心#303030；
右边框：2px实心#303030；
背景:#303030；
}
spiffy3先生{
左边距：1px；
右边距：1px；
左边框：1px实心#303030；
右边框：1px实心#303030；
}
.斯皮菲4{
左边框：1px实心#9191；
右边框：1px实心#9191；
}
斯皮菲先生{
左边框：1px实心#3f3f；
右边框：1px实心#3f3f；
}
目前，只有FireFox（
-moz-border-radius:5px；
）和Chrome（
-webkit-border-radius:5px；
）才掌握了边界半径

在IE中也有实现相同效果的脚本，但是，它们并没有那么好。主要是当涉及到作为背景图像的模式时。 让我们举一个例子，您得到一个图案作为背景图像和实心块容器，顶部有圆形边框。脚本确实会生成边框，但角点将是纯色且不透明

不过，还是有办法的！它叫。一开始学习使用它是一场噩梦。然而，如果你能让它工作起来，它将是最终的解决方案！将为角添加半径，并保持角背景透明。而且，它在IE6中工作得很好

现在，据我所知。。您只需要一个边框，而容器没有填充。那么，试试底部的演示，在FireFox或Chrome中。这就是你的意思吗？如果是这样的话，那仍然是你最好的选择

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


#演示容器{
/*真正的诀窍是：*/
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
/*为了使演示更有趣：*/
边框：2件纯黑；
填充：10px；
利润率：10px；
}
堆栈溢出
目前，只有FireFox（
-moz-border-radius:5px；
）和Chrome（
-webkit-border-radius:5px；
）才掌握了边界半径

在IE中也有实现相同效果的脚本，但是，它们并没有那么好。主要是当涉及到作为背景图像的模式时。 让我们举一个例子，您得到一个图案作为背景图像和实心块容器，顶部有圆形边框。脚本确实会生成边框，但角点将是纯色且不透明

不过，还是有办法的！它叫。一开始学习使用它是一项艰巨的任务