css - 如何仅显示角边框？

Question

我想知道是否可以在 CSS 中制作边框但仅用于角落。像这样的东西：

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****

score 52 · Accepted Answer

假设<div id="content">CONTENT</div>并且CONTENT包含至少一个 HTML 节点。

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

这是一个小提琴

score 50 · Accepted Answer

我会使用重叠的div。

一种带有方角。另一个是圆角的（所以它不会隐藏第一个的角）。

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

结果：

在此处输入图像描述

@web-tiki 提供的增强解决方案：

http://jsfiddle.net/webtiki/y3EfP/147/

score 44 · Accepted Answer

您可以使用多个线性渐变作为背景图像来实现这一点。

div {
  width: 100px;
  height: 100px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}

<div></div>

score 27 · Accepted Answer

SVG

如果您现在想开始使用向量以实现出色的响应能力，这是另一个不错的选择。

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

SVG 是一个很好的工具。在这种情况下使用 SVG 的一些优点是：

曲线控制
填充控制（不透明度、颜色）
描边控制（宽度、不透明度、颜色）
代码量
是时候建立和保持形状了
可扩展
没有 HTTP 请求（如果在示例中使用内联）

浏览器对内联 SVG 的支持可以追溯到 Internet Explorer 9。有关更多信息，请参阅canIuse。

score 27 · Accepted Answer

这是一个使用渐变和 CSS 变量的想法，您可以在其中轻松控制边框的形状：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  border:var(--b) solid transparent; /* space for the border */
  --g:#0000 90deg,var(--c) 0;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--g)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--g)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--g)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
  background-size:var(--w) var(--w);
  background-origin:border-box;
  background-repeat:no-repeat;
  
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}

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

<div class="box" style="--c:blue;--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:green;--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:black;--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:orange;--w:calc(50% - 10px);--b:4px">
some content
</div>

如果将其与蒙版结合使用，您也可以拥有复杂的颜色：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  --g:#0000 90deg,#000 0;
  -webkit-mask:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--g)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--g)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--g)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
  -webkit-mask-size:var(--w) var(--w);
  background-origin:border-box;
  -webkit-mask-repeat:no-repeat;
  mask:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--g)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--g)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--g)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
  mask-size:var(--w) var(--w);
  mask-repeat:no-repeat;
}

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

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px">
some content
</div>

为什么不使用半径：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  --r:25px;  /* radius */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  padding:var(--b);
  border-radius:var(--r);
  -webkit-mask:
    linear-gradient(#fff 0 0) top   /calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff 0 0) bottom/calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff 0 0) left  /var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff 0 0) right / var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff 0 0) top   /calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff 0 0) bottom/calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff 0 0) left  /var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff 0 0) right / var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  mask-repeat:no-repeat;
}

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

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px;--r:40px;">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px;--r:0px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px;--r:10px">
some content
</div>

score 17 · Accepted Answer

您绝对可以放置四个<div>s，每个角落一个，每个都有适当的两个边框。

.corners {
  position: relative;
  width: 50px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

score 17 · Accepted Answer

这里有一些方法可以在不使用任何额外的伪/真实元素的情况下创建这种效果。需要注意的一点是，这两种方法都只适用于现代浏览器，因为它们使用 CSS3 属性。

Using border-image：该border-image属性可以很容易地创建这样的效果。方法如下：

创建一个透明图像，它的边框就在角落里，就像这里一样。
将此图像设置为border-image-source，让浏览器处理其余的 :) 由于默认值为border-image-repeat，stretch因此即使容器变大，浏览器也会拉伸原始图像以适应容器。
为该border-image-width属性设置的值决定了边框的粗细。

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 1;
  border-image-width: 5px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered large-square'></div>

优点：

不需要额外的元素（伪或真实），这意味着更少的混乱标记，伪元素可以用于其他需求。
反应灵敏。也就是说，即使容器的尺寸发生变化，浏览器也会调整边框。

缺点：

相对较低的浏览器支持。如果需要 IE10- 支持，那么这是不行的。

由于边框图像被拉伸，如果原始图像的画布是正方形并且容器是矩形，那么边框在顶部和底部看起来会比左右更宽。

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 2;
  border-image-width: 5px;
}
.small-square {
  height: 75px;
  width: 75px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}
.rectangle {
  height: 150px;
  width: 250px;
}
.large-rectangle {
  height: 150px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered small-square'></div>
<div class='bordered square'></div>
<div class='bordered large-square'></div>
<div class='bordered rectangle'></div>
<div class='bordered large-rectangle'></div>

Using background-image：该background-image属性也可以与linear-gradient图像一起使用以产生效果。方法如下：

创建四个linear-gradient图像（两个用于顶部、底部和两个用于左、右）。这些渐变将从所需的颜色开始，并继续是与边框图像的宽度/高度一样多的像素的颜色。之后它应该是透明的。
对于顶部和底部边框，渐变的方向应该是to right. 对于左右边框，应该是to bottom.
该background-size值决定了边框的粗细。对于顶部和底部边框，渐变图像的大小在 X 轴上为 100%，在 Y 轴上为 5px（厚度）。对于左右边框，X 轴大小为 5px（厚度），Y 轴大小为 100%。
background-repeat应该repeat-x为顶部、底部边框和repeat-y左右边框设置为。
视情况在background-positionX 或 Y 轴上设置为（-1 * 渐变颜色大小的一半）。这是为了使一半的彩色区域出现在元素的一侧，而另一半出现在另一侧（因为渐变是重复的）。

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.rectangle {
  height: 150px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered rectangle'></div>

优点：

不需要额外的元素（伪或真实），这意味着更少的混乱标记，伪元素可以用于其他需求。

由于渐变中颜色的宽度是固定的，因此具有合理的响应性。如果边框虚线的宽度需要根据容器的尺寸进行更改，那么我们可以将渐变中的像素值更改为百分比（还有一些小的更改），如下面的片段所示。

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.large-square {
  height: 250px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
  background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
  background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered large-square'></div>

缺点：

相对较好的浏览器支持。如果需要 IE9 支持，那么这是不行的。
如果使用基于百分比的渐变，那么这里提到的矩形的相同缺点border-image也将适用。

score 6 · Accepted Answer

剪辑路径

在彼此之上使用两个 div。并在后面的 div 中添加一个剪辑路径，您可以创建类似边框的效果。

.wrapper {
  display: inline-block;
  background-color: black;
  line-height: 0px;
  -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
    clip-path: polygon(0% 100%, 
                             30% 100%, 
                             30% 70%, 
                             70% 70%, 
                             70% 100%, 
                             100% 100%, 
                             100% 70%, 
                             70% 70%,
                             70% 30%,
                             100% 30%,
                             100% 0%,
                             70% 0%,
                             70% 30%,
                             30% 30%,
                             30% 0%,
                             0% 0%,
                             0% 30%,
                             30% 30%,
                             30% 70%,
                             0% 70%);
}
.wrapper {} .wrapper div {
  display: inline-block;
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: white;
}

<div class="wrapper">
  <div></div>
</div>

两个伪元素

使用两个大的伪元素可以创建边框效果。

.cut-border {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  width: 150px;
  height: 150px;
}
.cut-border::before {
  content: "";
  position: absolute;
  height: calc(100% + 10px);
  width: 50%;
  background-color: white;
  top: -5px;
  left: 25%;
}
.cut-border::after {
  content: "";
  position: absolute;
  height: 50%;
  width: calc(100% + 10px);
  background-color: white;
  top: 25%;
  left: -5px;
}

<div class="cut-border"></div>

score 3 · Accepted Answer

发现了这个问题，但是对border-radius的做法并不满意：因为我用的比较粗的边框，效果没有我想的那么好。我设法创建了另一个解决方案，没有图像，也没有任何额外的标记：

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

这是一个带有此示例的 JSFiddle：https ://jsfiddle.net/t6dbmq3e/ 希望对您有所帮助。

score 2 · Accepted Answer

这是我最近对垂直和水平居中的内容所做的事情。

的HTML

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

score 2 · Accepted Answer

我认为最好的解决方案是伪元素方法。漂亮干净，不会用（太多）额外元素污染 html。

我使用上面的代码创建了这个 sass mixin，用于复制和粘贴解决方案：

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

然后你可以像这样使用它：

html:

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

您需要其中的 z-index 和相对位置，以便内容位于伪元素之上。

我在这里做了一个codepen演示：http: //codepen.io/timrross/pen/XMwVbV

score 2 · Accepted Answer

到目前为止没有人提到的一个选项是使用多个box-shadow来模拟这种类型的边框。每个角落都需要一个盒子阴影：

div {
  width: 150px;
  height: 150px;
  padding: 10px;
  box-shadow:
    -80px -80px 0 -70px black,
     80px -80px 0 -70px black,
    -80px  80px 0 -70px black,
     80px  80px 0 -70px black;
}

<div>I am a box with borders only in the corners.</div>

它的工作原理是有四个阴影（左上、右上、右下、左下）并使用负扩展半径减小它们的大小（模糊半径将保持为零）：

box-shadow: offset-x offset-y [blur-radius] [spread-radius] [color];

虽然这是可行的（即使在 IE 上！）并且它是一个简单的方法（不需要额外的元素或伪元素），但它有两个很大的缺陷：

您需要知道盒子的大小以相应地调整 box-shadow 的值（或者至少有一个大致的想法来调整阴影的值，因为它们不接受百分比）。
角不会完全成正方形。相反，它们将与盒子大小成正比。这可以通过使用 8 个阴影而不是 4 个来避免，但事情会变得一团糟。

最后，使用背景渐变可能是一个更好的选择，并提供“更多控制”，因为它都在框内。它可以通过 4 个线性梯度来实现（一些答案表示 8 个）：

div {
  --size: 32px;
  width: 100px;
  height: 100px;
  padding: 10px;
  background:
    linear-gradient(blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 0 0 / 4px 100%,
    linear-gradient(blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 100% 0 / 4px 100%,
    linear-gradient(to right, blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 0 0 / 100% 4px,
    linear-gradient(to right, blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 0 100% / 100% 4px
    ;
  background-repeat: no-repeat;
}

<div>I am a box with borders only in the corners.</div>

score 1 · Accepted Answer

好的，因为我在 CSS 中很烂，我想我自己无法做到，但我做到了，它似乎有效：

<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>

它似乎正在工作；-) 抱歉打扰并感谢您的帮助。

score 1 · Accepted Answer

没有干净的 css 方法可以只给角落一个边框，但你可以尝试模仿效果。可能是这样的：http: //jsfiddle.net/RLG4z/

<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

由于边框半径的不同，底层 div 的背景颜色显示为低谷，在角上产生边框的效果。

我个人认为我会使用背景图像来实现这一点，以便更好地控制结果。

score 1 · Accepted Answer

这是你的照片：

HTML：

<div class="shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

和 CSS：

.shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }

score 1 · Accepted Answer

这是上述答案的修改版本，该版本具有相对定位的父级和绝对定位的子级，因此我们可以添加悬停效果。

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

score 1 · Accepted Answer

我喜欢@Tims 方法，但它迫使我为框设置背景颜色，这是我不想要的，因为我将焦点放在背景图像对象上。在我的情况下，我也只需要 2 个边缘，这使得它的结构可能有所不同。

因此，我对其进行了一些不同的构造，使其更加灵活并且仍然适用于每个浏览器。

如果您需要 4 个角，则该解决方案不起作用，只是想将其留在这里以供将来的搜索者使用。

:root {
  --border-width: 5px;
  --corner-size: 20px;
  --border-color: red;
}
    
.box-corners {
  position:relative;
}

        .box-corners::before,
        .box-corners::after {
            content: "";
            position: absolute;
            width:var(--corner-size);
            height:var(--corner-size);
            border:var(--border-width) solid var(--border-color);
        }
    
        .box-corners::before {
            left: 0;
            top: 0;
            border-bottom:none;
            border-right:none;
        }
    
        .box-corners::after {
            bottom: 0;
            right: 0;
            border-left:none;
            border-top:none;
        }
        
        
/* ############## THIS IS JUST OPTIONAL FOR THE HOVER EFFECT ############# */


    .box-corners {
        transition:background-color 0.3s ease-in-out;
    }


    .box-corners:hover {
        background:rgba(0, 0, 0, 0.5)!important;
    }

        .box-corners::before,
        .box-corners::after {
            box-sizing:border-box;
            transition:width 0.3s ease-in-out, height 0.3s ease-in-out;
        }

        .box-corners:hover::before,
        .box-corners:hover::after {
            width:100%;
            height:100%;
        }

<div class="box-corners" style="width:300px;height:300px;background:#f7f7f7;" />

悬停效果

您只需要 css 代码的第一部分即可使边缘工作。第二部分只是允许轻松添加一个漂亮的悬停效果，如果你不需要它，你也可以删除它。

没有 CSS 变量和 Sass

如果您不想使用 css 变量，则可以将变量替换为硬编码值。如果你想用它制作一个 sass mixin，只需将它包装在一个 @mixin 调用中，然后用 sass 变量替换 vars。

score 1 · Accepted Answer

我接受了 Majid Laissi 的回答并修改为更易于理解、简单且易于修改。

img{
  width:70px;
  height:70px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.custom-corners {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
}

.custom-corners:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  border: 1px solid #fff;
  height: 100%;
  width: 100%;
  border-radius: 10%;
}

.custom-corners:after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 1px solid #fff;
  height: 100%;
  width: 100%;
  border-radius: 10%;
}

<div class="custom-corners">
  <img src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png" alt="">
</div>

score 0 · Accepted Answer

.border_coners {
      background:
        linear-gradient(to right, #e5e5e5 1px, transparent 1px) 0 0,
        linear-gradient(to right, #e5e5e5 1px, transparent 1px) 0 100%,
        linear-gradient(to left, #e5e5e5 1px, transparent 1px) 100% 0,
        linear-gradient(to left, #e5e5e5 1px, transparent 1px) 100% 100%,
        linear-gradient(to bottom, #e5e5e5 1px, transparent 1px) 0 0,
        linear-gradient(to bottom, #e5e5e5 1px, transparent 1px) 100% 0,
        linear-gradient(to top, #e5e5e5 1px, transparent 1px) 0 100%,
        linear-gradient(to top, #e5e5e5 1px, transparent 1px) 100% 100%;
      background-repeat: no-repeat;
      background-size: 50px 50px;
               }

score 0 · Accepted Answer

我调整了边界半径方法，但我不想使用绝对定位或必须知道内容的大小。

幸运的是，在所有方向上设置负边距提供了我们需要的一切：

.corner-borders {
    border: 1px solid #ccc;
}

.corner-borders-reveal {
    border-radius: 20%; /* or any other size */
    border: 1px solid white;
    margin: -1px;
    padding: 4px;
 }

css - 如何仅显示角边框？

20 回答 20

SVG

剪辑路径

两个伪元素

html:

SCSS

Related

Reference