Как сделать так, чтобы содержимое элемента с закругленной границей также было закруглено?

Question

http://jsfiddle.net/XjsWZ/

Я пытаюсь заставить саму белую коробку иметь закругленные углы в дополнение к ее прозрачной серой рамке, используя CSS3. Возможно ли это?

HTML:

<div class="outer"><div class="inner"></div></div>

CSS:

.outer{
    width: 300px;
    height: 300px;
    border: solid 10px;
    border-radius: 5px;
    border-color: rgba(0, 0, 0, 0.5);    
}

.inner{
    border-radius 5px;    
}

Бонусный вопрос: Что с этими черными квадратами по углам на Chrome?

РЕДАКТИРОВАТЬ: я нашел обсуждение черных квадратов: Странное поведение непрозрачности границы в Webkit?

Answer 1

http://jsfiddle.net/XjsWZ/3/ возможно?

** edit **

Я предпочитаю JamWaffles ':

.outer{
    width: 290px;
    height: 290px;
    border: solid 10px;
    border-radius: 15px;
    border-color: rgba(0, 0, 0, 0.5); 
    background-clip:padding-box;
    background-color:white;
    padding: 5px;  
}

Или, если вы хотите различные углы есть вариант Джедидии:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}

.inner{
    border-radius: 5px;
    background-color: white;
    height: 100%;
}

Answer 2

Ответ JamWaffles более чистый, но если вы хотите достичь этого с помощью вложенных тегов div и полупрозрачной границы, вы можете установить цвет фона на внешнем элементе div, чтобы он соответствовал цвету границы, вам также нужно установить background-clip: padding-box; так чтобы граница и фон не перекрывали друг друга.

Пример: http://jsfiddle.net/XjsWZ/7/

CSS:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.inner{
    border-radius: 5px;
    background-color: white;
    display:block;
    width: 100%;
    height: 100%;
}

HTML:

<div class="outer"><div class="inner"></div></div>

Answer 3

Это немного изменит внешний вид рамки, но если радиус границы больше ширины границы, вы также получите внутренние закругленные углы.

Пример здесь .Я удалил внутренний div, так как он не нужен для примера, так как я сделал предположение, что вы вкладываете только для достижения закругленного эффекта.

По отношению к black squares in the corners, я надеваюс Chromium 12 вообще ничего не получится. Вы можете попробовать использовать обычный шестнадцатеричный цвет вместо цвета RGBA.Для вашего текущего цвета это #808080, хотя я ценю необходимость в прозрачности;это для всплывающего окна в стиле Facebox?

Answer 4

http://jsfiddle.net/XjsWZ/10/

Похоже, что это было бы хорошим решением, хотя технически оно не использует границу, оно поддерживает правильное значение альфа, избавляясь от черных квадратов в веб-наборе:

CSS:

.outer{
    width: 300px;
    height: 300px;
    background-clip:padding-box;
    background-color: rgba(0,0,0,0.5);
    border: solid 10px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.inner{
    border-radius: 5px;
    background-color: white;
    display: block;
    width: 280px;
    height: 280px;
    position: relative;
    top: 10px;
    left: 10px;
}

HTML:

<div class="outer"><div class="inner"></div></div>