CSS：负半径的边框

Question

我第一次遇到有关边界的问题。

所以，我需要创建没有任何图像的相似边框（如果可能的话）：

页面底部的相同内容

如您所见，有两个带有负（？）border-radius的边框。我知道负面border-radius不会起作用，所以如果有人可以帮我解决问题，我将非常感激。

我已经尝试了这个：The first example，但问题是我无法创建普通边框 - 仅限整个块。

Answer 1

你可以查看这个jQuery插件：http://jquery.malsup.com/corner/其中还有很多其他边框样式的可能性。

您还可以查看Lea Verou提供的解决方案。她使用负边界半径和css3渐变：http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

Answer 2

将div元素作为包装器，并使用div添加元素作为圆角。 您可以尝试在子元素上添加border-radius角点：

示例：http://jsfiddle.net/5YS68/

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

p {
    margin: 0;
    width: 98px;
    height: 98px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
b.top-right {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

b.top-left {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

您还可以使用:before和:after伪元素来获得更清晰的HTML。使用一个元素（前面和后面的伪元素定位为绝对值）用于顶角，一个元素用于底角