如何使用CSS实现多重带有圆角的边框？

Question

有没有办法让多重边框的圆角效果生效呢？ 这个盒子是动态的，取决于输入的内容，所以我不能添加静态的宽度或高度。

    body { background: #d2d1d0; }

    #box {
        border-radius: 15px;
        background: #f4f4f4;
        border: 1px solid #bbbbbb;
        width: 100%;  
        height: 100%;
        margin: 10px auto;
        position: relative;
    }

    DIV#box, #box:before, #box:after {
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #box:before {
        border-radius: 15px;
        border: 1px solid white;
        width: 99%;  
        height: 94%;
        content: '';
        position: absolute;
    }

    #box:after {
        border-radius: 15px;
        content: '';
        position: absolute;
        border: 1px solid #bbbbbb;
        width: 98%;  
        height: 90%;
        left: 1px; top: 1px;
    }

HTML

<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>

我目前遇到的问题是窗口拉伸时并不是所有边框都对称拉伸，那么我应该如何解决？顺便说一下，我目前对在FF和Chrome中使用CSS很感兴趣。

- user585303

---

到目前为止，所有的答案都很好，我会看看哪一个对我最有效！ - user585303

Answer 1

有几种方法可以实现具有圆角的多重边框。我个人采用使用阴影的方法。对于您的HTML代码，您可以这样做。

HTML代码:

<div id="box">
    Hello World!!!!<br>
    THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.
</div>

CSS（层叠样式表）

#box{
    border-radius: 15px;
    background: #f4f4f4;
    border: 3px solid #bbbbbb;

    box-shadow: 0 0 0 3px #8B2323, 
                0 0 0 6px #FF7F00, 
                0 0 0 9px #458B00;


    width: 100%;  
    height: 100%;
    margin: 10px auto;
    position: relative;
}​

演示：http://jsfiddle.net/GdSfh/

如果你想了解更多关于多重边框的内容，我建议你阅读我的教程"CSS中的多重边框"，因为其中有一些其他方法可能会在未来对你有所帮助。如果你想了解更多关于阴影的内容，请参考我的教程"CSS中的阴影"。

- mildog8

Answer 2

<div id="box">
<p>Hello World!!!!<br>
    THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>

上面是HTML，下面是CSS。

    body { background: #d2d1d0; }

#box {
    background: #F4F4F4;
    border: 3px solid blue;
    position: relative;
    height: 100%;
    width: 100%;
}

#box p {
    padding: 10px;
}

#box:before {
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#box {
    -moz-border-radius: 9px;
    border-radius: 9px;
}

#box:after {
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#box:before {
    border: 3px solid red;
    content: '';
    position: absolute;
    top: -9px;
    right: -9px;
    bottom: -9px;
    left: -9px;
}

#box:after {
    border: 3px solid green;
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}

http://jsfiddle.net/H7QjP/7/ 【代码示例】

就像这样。感谢 jnpcl 提供的东西以供构建，我只是更改了边框半径，使它们更加紧密对齐。

- Hiphop03199

---

绝对是一个好方法。允许在每个边上使用不同的边框样式。 - fcaserio

Answer 3

我能提供的唯一CSS解决方案是双重边框，边框之间的空间与被边框包围的元素的背景颜色相同，例如HTML代码：

<div id="box">
    <p>Some content</p>
</div>

连接到CSS：

#box {
    border: 10px double #f90;
    border-radius: 1.5em;
    padding: 1em;
    color: #000;
    background-color: #ffa;
}

提供一个 JS Fiddle演示...

- David Thomas

---

这是我认为最好的纯 CSS 解决方案。他需要添加一个外部 div 以更好地控制发生的情况。 - Hugo Migneron

Answer 4

刚刚发现了另一种更简洁的方法

演示和代码在这里：http://jsfiddle.net/mYGsh/1/

[此演示有8种不同的边框样式]

HTML代码：

<p class="gradient-border">This is an example of a box with a gradient border. This example will currently work in Mozilla and Firefox browsers.</p>

这是 CSS：

.gradient-border {
    border: 8px solid #000;
    -moz-border-radius: 12px;
    -moz-border-bottom-colors: #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    -moz-border-top-colors:    #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    -moz-border-left-colors:   #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    -moz-border-right-colors:  #555 #FF0000 #777 #888 #00FF00 #aaa #0000FF #ccc;
    padding: 5px 5px 5px 15px;
}

- Hiphop03199

Answer 5

我使用内联块边框、包含两层阴影的盒子阴影来创建一个链接图片的代码，共三层边框和阴影，无需 CSS 样式。

内联块创建第一层边框，然后盒子阴影创建第二层，最后添加阴影效果并加入圆角代码，同时捕获内联块边框。

如果要用于文本，只需将图像样式更改为 span 样式，并用文本替换图像源，如果不需要链接，则删除链接。

<a href="http://url" target="_blank">
<img style="display:inline-block;padding:1px;padding-left:2px;padding-top:10px;padding-bottom:10px;width:130px;border: 5px solid#001aff; box-shadow:0px 0px 0px 1px #000000, 0px 0px 25px 14px #001EA3;background: #000000;
border-radius: 5px;
-moz-border-radius: 5px
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;"
src="http://image.gif" height="41" align="absmiddle" /></a>

- Bob S

Answer 6

我建议使用优秀的jQuery圆角插件。

http://jquery.malsup.com/corner/

它在所有浏览器中都受支持，包括IE。它使用嵌套的div（没有图像）在IE中绘制角落。在支持本地边框半径舍入的浏览器中（Opera 10.5+、Firefox、Safari和Chrome），它还具有本地边框半径舍入功能。因此，在这些浏览器中，插件只需设置一个CSS属性。

以下是如何使用它

您需要在</body>之前包含jQuery和Corner js脚本。然后编写您的jQuery代码，例如$('div, p').corner('10px');并放置在''之前。因此，您的HTML将类似于下面的代码。在这里，我为所有div和p标签制作圆角。如果您想要针对特定的ID或类执行此操作，则可以执行类似于$('#myid').corner();的操作。

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

请查看工作示例http://jsfiddle.net/VLPpk/1

- Hussein

---

这如何解决原帖作者的问题？ - drudge

该插件允许运营人员在保持各个浏览器的单独边框半径的同时扩展宽度。 - Hussein

Answer 7

补充David的解决方案：

双重边框相当有限。但是，如果您愿意修改标记，可以通过以下方式解决问题：

<div id="outerbox">
    <div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
</div>

在你的 CSS 中：

#box 
{
        border-radius: 15px;
        border: 1px solid #bbbbbb;
        width: 100%;  
        height: 100%;
        position: relative;

}
#outerbox
{
    padding:10px;
    border : 1px solid #bbbbbb; 
    background: #f4f4f4; 
    border-radius: 15px;
}

这将允许您将两个边框之间的背景颜色设置为您想要的颜色。它还可以让您调整边框的宽度。

http://jsfiddle.net/rPsdK/1/

- Hugo Migneron

Answer 8

试试这个：

在线演示

<style type="text/css">
body { background: #d2d1d0; }
#box {
    background: #F4F4F4;
    border: 1px solid blue;
    position: relative;
    height: 100%;
    width: 100%;
}
#box p { padding: 10px; }
#box, #box:before, #box:after {
    -moz-border-radius: 15px;
    border-radius: 15px;
}
#box:before {
    border: 1px solid red;
    content: '';
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
}
#box:after {
    border: 1px solid green;
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
}
</style>

<div id="box">
    <p>Hello World!!!!<br>
       THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</p>
</div>

- drudge