it-swarm.com.ru

Вставить border-radius с помощью CSS3

Есть ли способ создать радиус границы вставки с помощью CSS3? (Без изображений)

Мне нужен радиус границы, как это:

Inset border radius

28
Serhiy

Лучший способ, который я нашел, чтобы достичь этого со всеми 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).

32
Chris Krycho

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

Проверьте мой пример .

Это основные 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>

11
Brett Hayes

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

Смотрите мой пример здесь 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>

5
John Lawrence

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

Правка:

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

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

2
Matt Coughlin

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

Хорошая статья о границах изображений на csstricks .

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

2
Christoph

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>

Пример: http://jsfiddle.net/dVmX3/

1
Davinder Singh

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>

0
user8696825

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

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

0
Jon Mifsud