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

Question

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

Answer 1

您不能仅使用 border 来实现，但您可以使用 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 的精彩 answer 中得到了想法

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

使用border-image：

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

这种方法的主要缺点是border-image 属性具有low browser support。但它在只需要支持 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 指定一个linear-gradient 作为所有四个边的边框图像。我们需要一个伪元素（与父容器重叠），因为渐变只能在一个方向上。渐变可以支持基于百分比的值，因此可以适应不同的容器尺寸。这可以通过将鼠标悬停在 sn-p 中的 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>

Answer 3

我承认这种方法很疯狂，但是 - 作为一个实验 - 如果你只支持现代浏览器并且你使用 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 中垂直线较短的原因（无论如何，这可以使用固定值来解决），但正如您所见，解决方案中不涉及高度。这种方法的另一个好处是响应能力（尝试拉伸 codepen 输出面板）

^(*)：我撒谎了。这不仅仅是“一点”:)

Answer 4

四面灵活

• :before 伪元素创建左右边框
• :after 伪元素创建上下边框
• 边框的间距由top、right、bottom 和left 控制（同时具有 left 和 right 属性会在它们之间拉伸元素，与顶部和底部相同）李>

边框将始终保持指定的偏移距离。

这是一种可视化伪元素布局方式的好方法：

示例

div {
  background: purple;
  height: 50vh;
  width: 50vw;
  margin: 50px auto;
  position: relative;
  min-height: 200px;
  min-width: 200px;
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: 60px;
  left: -20px;
  right: -20px;
  bottom: 60px;
  border: solid 4px #000;
}
div:before {
  border-top: none;
  border-bottom: none;
}
div:after {
  top: -20px;
  left: 60px;
  right: 60px;
  bottom: -20px;
  border-left: none;
  border-right: none;
}

<div></div>

Answer 5

单角空间 抱歉挖掘，但我对@misterManSam 解决方案做出了自己的解释：我想到达一个角落的空闲空间，以便在我的项目中放置图标。

div {
  background: purple;
  height: 200px;
  width: 200px;
  margin: 50px auto;
  position: relative;
  min-height: 200px; /* Just adjust as you wish */
  min-width: 200px; /* Just adjust as you wish */
}

div:before { /* Bottom half Borders */
  content: '';
  position: absolute;
  top: 60px; /* Height of left border */
             /* Higher value - smaller border line */
  left: -20px; /* Margin between div edge */
  right: -20px; /* Margin between div edge */
  bottom: -20px; /* Margin between div edge */
  border: solid 3px #000;
  border-top: none;
}

div:after { /* Top half Borders */
  content: '';
  position: absolute;
  top: -20px; /* Margin between div edge */
  left: 60px; /* Height of top border */
             /* Higher value - smaller border line */
  right: -20px; /* Margin between div edge */
  bottom: 60px;
  border: solid 3px #000;
  border-left: none;
  border-bottom: none;
}

HTML

<div></div>

纯 HTML + CSS。 https://codepen.io/nigtellios/pen/LYZevGv