如何在CSS中创建边框角间距

Question

如何使用CSS创建边框角间距,如下图所示？内容的高度不固定.

Answer 1

你不能只使用它来border实现它,但你可以用s after和box-shadows 来实现

了解更多关于after和box-shadow

div {
  width: 200px;
  height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 80px;
  background: black;
  left: -10px;
  top: 10px;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 180px;
  background: black;
  left: 10px;
  top: -10px;
  box-shadow: 0 120px 0 0 black;
}

<div>content div</div>

如果要使用相对高度,则必须删除底部边框,或者可以使用jquery更改其位置 box-shadow

注意:我已经给contenteditable了div,以便在添加更多内容时看到更改

div {
  width: 200px;
  min-height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 90%;
  background: black;
  left: -10px;
  top: 5%;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 90%;
  background: black;
  left: 10px;
  top: -10px;
}

<div contenteditable="true">content div</div>

编辑:这可以根据你的需要改变宽度和高度我从misterMansam的精彩答案中得到了想法

div {
  width: 200px;
  min-height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  font-size:30px;
  color:#fff;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 90%;
  left:5%;
  top:0;
  height:110%;
  top:-5%;
  border-top:2px solid black;
  border-bottom:2px solid black;
}
div:before {
  position: absolute;
  content: "";
  width: 110%;
  left:-5%;
  top:0%;
  height:100%;
  border-left:2px solid black;
  border-right:2px solid black;
}

<div contenteditable="true">Content</div>

Answer 2

我承认这种方法很疯狂但是 - 作为一项实验 - 如果你只支持现代浏览器并且你 使用属性(用于切断角落)玩一点^(*clip-path)你可以试试这个:

http://codepen.io/anon/pen/qOBzJO

div {
  width: 300px;
  padding: 10px;
  margin: 50px;
  background: violet;
  background-clip: content-box;
  border: 3px #000 solid;

  clip-path: polygon(0 20%, 10px 20%, 10px 10px, 15% 10px, 15% 0, 
     85% 0, 85% 10px, calc(100% - 10px) 10px, calc(100% - 10px) 20%, 100% 20%, 
     100% 80%, calc(100% - 10px) 80%, calc(100% - 10px) calc(100% - 10px), 
     85% calc(100% - 10px), 85% 100%, 15% 100%, 15% calc(100% - 10px), 
     10px calc(100% - 10px), 10px 85%, 0 85%);

  -webkit-clip-path: polygon(0 20%, 10px 20%, 10px 10px, 15% 10px, 15% 0, 85% 0, 
     85% 10px, -webkit-calc(100% - 10px) 10px, -webkit-calc(100% - 10px) 20%, 
     100% 20%, 100% 80%, -webkit-calc(100% - 10px) 80%, 
     -webkit-calc(100% - 10px) -webkit-calc(100% - 10px), 
     85% -webkit-calc(100% - 10px), 85% 100%, 15% 100%, 15% 
     -webkit-calc(100% - 10px), 10px -webkit-calc(100% - 10px), 10px 85%, 0 85%);

}

有些值是百分比,这就是为什么垂直线在较高的div中更短(这可以使用固定值来解决),但正如您所看到的,高度不参与解决方案.这种方法的另一个好处是响应性(尝试拉伸编解码器输出面板)

^(*):我骗了.它不仅仅是"有点":)

Answer 3

使用 border-image：

我们可以利用border-image将 a 指定linear-gradient为所有四个边的边框图像。我们需要一个伪元素（与父容器重叠），因为渐变只能在一个方向上进行。渐变可以支持基于百分比的值，因此可以适应不同的容器尺寸。这可以通过将鼠标悬停在div代码片段中来验证。

这种方法的主要缺点是该border-image属性的浏览器支持率较低。但是当只需要支持 IE11+ 时它非常有用，因为不像box-shadow它不需要固定尺寸，它不像它那么复杂，clip-path并且还为其他潜在用途留下了备用伪元素。

.border-spacing{
  position: relative;
  height: 100px;
  width: 300px;
  padding: 10px;
  background: rgb(187, 103, 224);
  background-clip: content-box;
  border-image: linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%);
  border-image-slice: 4;
  border-image-width: 4px;
  border-image-repeat: round;
  
  /* Just for demo */
  text-align: center;
  line-height: 100px;
  color: white;
}
.border-spacing:after{
  position: absolute;
  content: '';
  top: -2px; /* half of border-image-slice */
  left: -2px; /* half of border-image-slice */
  height: calc(100% - 20px); /* 100% - 2 * padding */
  width: calc(100% - 20px); /* 100% - 2 * padding */
  padding: 10px;
  border-image: linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%);
  border-image-slice: 4;
  border-image-width: 4px;
  border-image-repeat: round;  
}

/* Just for demo */

.border-spacing{
  transition: all 1s;
}
.border-spacing:hover{
  height: 150px;
  width: 450px;
  line-height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border-spacing">Content div</div>

使用 background-image：

我们可以利用background-image将 a 指定linear-gradient为所有四个边的边框图像。我们需要一个伪元素（与父容器重叠），因为渐变只能在一个方向上进行。渐变可以支持基于百分比的值，因此可以适应不同的容器尺寸。这可以通过将鼠标悬停在div代码片段中来验证。

这种方法的缺点也与前一种方法非常相似，linear-gradient仅由 IE10+ 支持。优点与前面提到的相同。

.border-spacing{
  position: relative;
  height: 100px;
  width: 300px;
  padding: 10px;
  background-image: linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%);
  background-size: 4px 100%, 4px 100%, 100% 4px, 100% 4px;
  background-position: 0px 0px, 100% 0px, 0px 0px, 0px 100%;
  background-repeat: no-repeat;
  
  /* Just for demo */
  text-align: center;
  line-height: 100px;
  color: white;
}
.border-spacing:after{
  position: absolute;
  content: '';
  top: 10px;
  left: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  z-index: -1;
  background: rgb(187, 103, 224);
}


/* Just for demo */

.border-spacing{
  transition: all 1s;
}
.border-spacing:hover{
  height: 150px;
  width: 450px;
  line-height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border-spacing">Content div</div>