如何获得带有圆角的多个边界?的CSS [英] How can I get multiple borders with rounded corners? CSS

问题描述

关于如何获得带有多个边框的圆角的任何想法? 该框将是动态的，具体取决于将输入到框内的内容，因此我无法添加静态宽度或高度.

    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中运行感兴趣.

解决方案

有几种方法可以获取带有圆角的多个边界.我个人追求一种使用阴影的方法.对于您的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中的阴影.

Any idea on how I can get round corners work with multiple borders? The box will be dynamic, depending what will be inputed into the box, so I can't add static width or height.

    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>

The problem I am currently having is when I stretch window not all borders stretch symmetrically, so how can I fix that? FYI I am currently interested getting CSS working in FF and Chrome.

解决方案

There are a few ways to get multiple borders with round corners. I personally go for a method that uses shadows. For your html code you could do something like this.

The HTML

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

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

Demo: http://jsfiddle.net/GdSfh/

I suggest if you want to find out more on multiple borders please read my tutorial on Multiple borders in css as it has a few other methods that might help you in the future. If you want to find more about shadows please also refer to my tutorial Shadows in css.

这篇关于如何获得带有圆角的多个边界?的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！