Как сделать круглые углы как внутри коробки, так и ее границы?

Я думаю, что название довольно сложно понять, поэтому я объясню. Я пытаюсь добиться этого эффекта:

(прямоangularьник с закругленными углами и границей с закругленными краями).

Мне удалось сделать это, используя свойство background-clip:

(закругленные углы для границы, но не для внутреннего блока)

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

Спасибо!

EDIT

HTML-код, который я использую:

<header class="body template-bg template-border radius-all">
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </nav>
    </header>

И CSS:

.radius-all {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.template-bg {
  background: #FFF;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.template-border {
  border: 5px solid rgba(255, 255, 255, 0.2);
}

Ответ 1

Внутренние вычисления границ

Сначала вам нужно удалить -vendor-background-clip: padding-box или установить для них border-box значение по умолчанию, чтобы получить радиус внутренней границы.

Радиус внутренней границы рассчитывается как разница радиуса внешней границы (border-radius) и ширины границы (border-width), так что

inner border radius = outer border radius - border width

Всякий раз, когда border-width больше, чем border-radius, внутренний радиус границы отрицательный, и вы получаете некоторые неудобные перевернутые углы. В настоящее время я не верю, что есть свойство для настройки inner-border-radius, поэтому вам нужно будет вычислить его вручную.

В вашем случае:

inner border radius = 6px - 5px = 1px

Ваш новый CSS должен быть:

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }

Просто вычитайте значения border-radius (6px) из значения border-width (5px), чтобы достичь желаемого внутреннего радиуса:

Код, который работает для меня

Протестировано в Firefox 3.x, Google Chrome и Safari 5.0

 .radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */

Добавление цветных наложений в JavaScript

<script type="text/javascript">
    var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;

    // insert opacity decreasing code here for hexadecimal

    var header = document.getElementsByTagName('header')[0];
    header.style.backgroundColor = bodyBgColor;
</script>

Я не совсем уверен, как выполнить шестнадцатеричную арифметику в JavaScript, но я уверен, что вы можете найти алгоритм в Google.

Применение общих границ

Используете ли вы отдельный блок <div> для своей границы через свой background свойство? Если это так, вам нужно применить border-radius и его специфические свойства для поставщика как в поле рамки, так и в внутреннем поле:

<div id="border-box" style="border-radius: 5px;">
    <div id="inner-box" style="border-radius: 5px;">
    </div>
</div>

Более эффективный способ просто заставил бы внутренний ящик управлять собственной границей:

<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
    <!-- Content -->
</div>

CSS-мудрый, вы можете просто объявить класс .rounded-border и применить его ко всем полям, которые будут иметь округленные границы:

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

И примените класс к любым полям, которые будут иметь округленные границы:

<div id="border-box" class="rounded-borders">
    <div id="inner-box" class="rounded-borders">
    </div>
</div>

Для отдельного элемента окна вам все равно потребуется объявить размер рамки для отображения:

<style type="text/css">
    #inner-box { border: 4px solid blue; }
</style>

<div id="inner-box" class="rounded-borders">
</div>

Ответ 2

Другое решение состоит в том, чтобы совпадающие внутренние и внешние границы в сочетании с border-radius заключались в "подделке" границы с помощью <spread-radius> значения box-shadow имущество. Это создает сплошную тень, которая может легко проходить для регулярной границы.

Например, для достижения границы 4px и радиуса границы 4px белого используйте следующее:

/* rounded corners */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;

Если вы хотите добавить "реальную" тень к всему контейнеру, вы можете просто привязать свои теневые выражения так:

/* drop shadow */
-webkit-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);
box-shadow: 0px 0px 0px 4px rgba(255,255,255,1.0),
        1px 1px 8px 0 rgba(0,0,0,0.4);

Примечание: Имейте в виду, что порядок операторов - это порядок, в котором он будет отображаться.

Единственное, о чем следует опасаться, это то, что начальная "граница faux" будет перекрывать первые X пикселей (где X - ширина границы) любой тени, которую вы хотите под ней (и объедините, если вы используете RGBa непрозрачность на нем ниже 100%.)

Таким образом, он не будет работать во всех ситуациях, но он получит большинство. Я использую это довольно часто, когда регулярные границы не идеальны.

Ответ 3

Так как для CSS нет такой вещи, как inner-border-radius, браузеры по умолчанию используют ее border-radius - border-width. Если вам это не нравится, типичным решением является создание двух div с границами, имитирующих внутренний радиус границы, но это решение привносит больше дизайна в html. Это также боль, если это общий шаблон границы, используемый на сайте.

Мне удалось найти способ сохранить все это в css, создав внутренний div, используя :after и content: "". Поэтому для вашего случая это будет:

.template-border {
    position: relative;
    border-radius: 5px;
    background-color: #000;
    border: 10px solid #000;
    z-index: -2;
}

.template-border:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #FFF;
    z-index: -1;
}

Ответ 4

Основываясь на идее Лео Ву, вот это мое решение:

.my-div
{
  background-color: white;
  border: solid 20px black;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
  height: 100px;
  left: 30px;
  position: relative;
  top: 20px;
  width: 200px;
}
.my-div:before
{
  background-color: white;
  border-radius: 5px;
  content: "";
  display: block;
  height: calc(100% + 20px);
  left: -10px;
  position: absolute;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 1;
}
.some-content
{
  height: calc(100% + 20px);
  left: -10px;
  position: relative;
  top: -10px;
  width: calc(100% + 20px);
  z-index: 3;
}
.some-header
{
  background-color: green;
  border-radius: 5px 5px 0 0;
  height: 30px;
}

<html>
	<body>
		<div class="my-div">
			<div class="some-content">
				<div class="some-header">my title</div>
				<div>some other content</div>
			</div>
		</div>
	</body>
</html>

Ответ 5

Вам нужно иметь два элемента div, один внутри другого, и использовать скругленный угол css для кросс-браузера, например:

.small-rounded {
    border: 1px solid ##000;
    -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
    border-radius: 5px;
}

Ответ 6

Проблема заключается не в кодировании CSS, а в математике круга. По существу ваш border-inner-radius (я знаю, что этого свойства не существует) равен border-radius - border-width.

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

border-inner-radius + border-width= border-radius

Ответ 7

Большинство решений на этой странице относятся к эпохам веб-камней (до 2013 года, т.е. даже до IE11).

Начиная с IE11, способ сделать это очень просто...

На всякий случай, если кто-то из Google ответит на этот вопрос после 2013 года (сегодня это почти 2020 год) и будет отправлен сюда, вот самый простой, совместимый и простой способ сделать это, даже если вам нужна поддержка IE11...

(Не стесняйтесь изменять значения px для нужного вам вида или, что еще лучше, использовать переменные и переносить их с помощью Stylus или SASS)

Пример HTML...

<div class="wrapper">
    <div class="content">
        your content goes here
    </div>
</div>

Пример CSS...

.wrapper {
    border-radius: 25px;
    border: solid 25px blue;
    background-color: blue;
}
.content {
    border-radius: 10px;
    background-color: white;
}

... Presto.

Ответ 8

Вам нужно сделать радиус границы равным значению, превышающему ширину границы, до тех пор, пока вы не увидите кривую. Это не заданная формула для установки радиуса границы на + 1px больше границы. Тем не менее, это будет положительная ценность, определенно. Вам нужно поэкспериментировать в разных браузерах, где вам это нужно, пока не увидите наименьшее возможное значение радиуса границы, которое будет достаточно хорошо для вас в большинстве браузеров. (Некоторые браузеры, возможно, не поддерживают это.) Например, в Google Chrome я установил ширину границы до 10 пикселей, но должен был установить радиус границы до 13 пикселей, прежде чем я начал видеть видимость внутренней граничной кривой, а 15 пикселей работал еще лучше.