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>

我目前遇到的问题是，当我拉伸窗口并非所有边框都对称拉伸时，我该如何解决？仅供参考我目前感兴趣的是让CSS在FF和Chrome中工作。

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/

我建议如果您想了解更多关于多个边框的内容，请阅读我在Multiple borders in css上的教程，因为它有一些其他方法可能会对您有所帮助。如果您想了解有关阴影的更多信息，请参阅我的教程Shadows in css。

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给了我一些东西可以建立起来，我只是改变了边界半径，以便它们排列得更紧。

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

提供a JS Fiddle demo ...

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

Answer 5

我想出了一个链接图像的代码，使用包含在框阴影中的内嵌块边框，第二个框阴影用于带阴影的2层边框，总共3层＆amp;不需要CSS样式。

内联块创建第一个边框然后一个框阴影创建第二个＆amp;锦上添花后添加阴影，然后是捕获内联块边框的舍入代码。

要将其用于文本，只需将图像样式更改为span style＆amp;用text＆amp;替换image src;如果您不需要，请删除该链接。

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

Answer 6

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

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

所有浏览器都支持IE，包括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

处的工作示例

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/

Answer 8

试试这个：

<强> Live Demo

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

如何获得带圆角的多个边框？ CSS

8 个答案:

刚刚找到了另一种更清洁的方法

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

以下是如何使用

检查http://jsfiddle.net/VLPpk/1