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

Question

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

Answer 1

你不能仅使用 border 来做到这一点，但你可以使用 after 和 box-shadows

来实现

查看更多关于 after and 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（无论如何都可以使用固定值解决），但正如您所见，高度不参与解决方案。这种方法的另一个好处是响应能力（尝试拉伸 codepen 输出面板）

^(*)：我撒谎了。不只是 "a bit" :)

Answer 3

四个面都灵活

:before伪元素创建左右边框
:after伪元素创建上下边框
边框的间距由 top、right、bottom 和 left 控制（具有左右属性拉伸它们之间的元素，同top和bottom)

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

下面是可视化伪元素布局方式的好方法：

例子

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 4

使用 border-image:

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

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

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

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

How to create border corner spacing in CSS

css

border

css-shapes

四个面都灵活

例子