Как я могу получить несколько границ с закругленными углами? 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>

Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что когда я растягиваю окно, не все границы растягиваются симметрично, так как я могу это исправить?К вашему сведению, я сейчас заинтересован, чтобы 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/

Я предлагаю, если вы хотите узнать больше о нескольких границах, пожалуйста, прочитайте мое руководство по Несколько границ в 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;
}

Дает демонстрацию JS Fiddle ...

Answer 4

Я придумал этот код для связанного изображения, используя встроенную границу блока, обернутую тенью блока со 2-й тенью блока для двухслойной границы с тенью, всего 3 слоя и стиль CSS не требуется.

встроенный блок создает 1-ю границу, затем тень блока создает 2-ю, а глазурь на торте добавляет тень, за которой следует код округления, который также фиксирует границу встроенного блока.

Чтобы использовать его для текста, просто измените стиль изображения, чтобы он соответствовал стилю, замените 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 5

Только что нашел другой более чистый способ сделать это

Демонстрационная версия и код здесь: 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 6

Попробуйте это:

Демонстрация в реальном времени

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

Answer 7

Чтобы добавить к решению Дэвида:

Двойная граница довольно ограничена.Однако, если вы хотите изменить свою разметку, вы можете решить свою проблему, выполнив:

<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

Я предлагаю использовать превосходный плагин jQuery за круглым углом.

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

Поддерживается во всех браузерах, включая IE. Он рисует углы в IE, используя вложенные элементы div (без изображений). Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome). Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как это сделать

Вам необходимо включить jQuery и js-скрипт Corner до </body>. Затем напишите свой jQuery как $ ('div, p'). Corner ('10px'); и поставить перед ''. Таким образом, ваш HTML будет выглядеть как приведенный ниже код. Здесь я делаю круглые углы для всех тегов div и p. Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#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