Вставка граничного радиуса с CSS3

Ответ 1

Лучший способ найти это со всеми CSS и HTML (без изображений и т.д.) - с использованием градиентов CSS3, за Lea Verou. Из ее решения:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Конечным результатом является набор прозрачных градиентов с кривыми. Посмотрите полный JSFiddle для демонстрации и поиграйте с тем, как он выглядит.

Очевидно, что это зависит от поддержки rgba и gradient, и соответственно следует рассматривать как прогрессивное улучшение или, если это необходимо для дизайна, вы должны предоставить резервную копию на основе изображений для старых браузеров (особенно IE, который не поддерживает gradient даже через IE9).

Ответ 2

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

Посмотрите мой пример.

Это базовый HTML и CSS, которые вам нужно начать:

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;}

a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;}
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;}

a div:first-of-type {left: -14px;}
a div:first-of-type:after {left:0;}

a div:last-of-type {right: -14px;}
a div:last-of-type:after {right:0;}

a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;}

a div:first-of-type span {left:-20px;}
a div:first-of-type span:first-child {top:-20px;}
a div:first-of-type span:last-child {bottom:-20px;}

a div:last-of-type span {right:-20px;}
a div:last-of-type span:first-child {top:-20px;}
a div:last-of-type span:last-child {bottom:-20px;}

<a href="">
    <div>
        <span></span>
        <span></span>
    </div>

    <div>
        <span></span>
        <span></span>
    </div>
</a>

Ответ 3

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

См. мой пример здесь http://jsfiddle.net/TdDtX/

#box {
    position: relative;
    margin: 30px;
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #333;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.top-left {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}

.top-right {
    top: -1px;
    left: 190px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.bottom-left {
    top: 90px;
    left: -1px;
    border-radius: 0 100% 0 0;
    border-width: 1px 1px 0 0;
}

.bottom-right {
    top: 90px;
    left: 190px;
    border-radius: 100% 0 0 0;
    border-width: 1px 0 0 1px;
}

<div id="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

Ответ 4

Не похоже, что это возможно. Я попробовал радиус границы с отрицательным значением, чтобы увидеть, что произойдет, но это не повлияло.

Edit:

Даже если вы разбиваете коробку на более мелкие части, в какой-то момент вам все равно придется создать прозрачный вставной уголок. Прозрачность - это сложная часть, которая может помешать этому быть невозможным без изображений. В принципе, вы должны иметь возможность отображать прозрачный круг с непрозрачным окружением bg (и если это возможно в CSS, мне бы хотелось знать, как:)

Если вам не нужна прозрачность, есть способы сделать это.

Ответ 5

Вы могли бы добиться этого эффекта с помощью новых изображений css3-Border (ну, это изображения, но он масштабируется без проблем). Но это совершенно новый и не очень широко поддерживается (ну во всех приличных браузерах (с префиксами), кроме IE, чтобы быть точным;)).

Хорошая статья о пограничных изображениях на csstricks.

Поддержка браузера

Ответ 6

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}

<div class="div">
<div class="box"></div>
</div>

</body>
</html>

Ответ 7

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

Затем для поддержки прозрачности вам, вероятно, придется добавить другие блоки между ними. Более или менее похоже на то, как раньше делались старые округлые изображения; с диапазоном для каждого угла с прозрачным изображением. И охватывает по бокам и вершине, чтобы заполнить пустое пространство. Вместо использования изображений вы можете использовать этот трюк, чтобы сделать это в CSS.