没有边框的HTML边框，或者元素的自定义长度边框

Question

如何为DIV添加边框，边框的宽度应小于元素的宽度？像这样：

目前，我有：

第1列

border-bottom: 1px solid grey;

第2列

border-left: 1px solid grey;
border-bottom: 1px solid grey;

第3列

border: none;

第4列

border-left: 1px solid grey;

我希望边框不占用div填充空间，像这样：

Answer 1

您可以使用两个linear-gradients来实现此效果-一个用于顶部/底部边框，一个用于左侧/右侧边框：

position:relative

.clipped-border {
  padding: 0 0.2em;
  background: 
    linear-gradient(to bottom, 
      red 4px, 
      transparent 4px, 
      transparent calc(100% - 4px), 
      red calc(100% - 4px)
    ),
    linear-gradient(to right, 
      red 5px, 
      transparent 5px, 
      transparent calc(100% - 4px), 
      red calc(100% - 4px)
    );
  background-size: 95% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-position: center;
}

Answer 2

.row1 {
  padding: 100px 100px 100px;
  display: flex;
}
.Column-1 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-bottom: 1px solid grey;
}
.Column-2 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  margin-left: 10px;
}
.row2 {
  padding: 0 100px 0;
  display: flex;
}
.Column-3 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border: none;
}
.Column-4 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-left: 1px solid grey;
  margin-left: 10px;
}

<div class="row1">
  <div class="Column-1"></div>
  <div class="Column-2"></div>
</div>
<div class="row2">
  <div class="Column-3"></div>
  <div class="Column-4"></div>
</div>

请检查此代码。

Answer 3

您可以尝试这样的渐变：

h1 {
  padding: 5px;
  background:
    linear-gradient(red,red) top center/calc(100% - 15px) 5px,
    linear-gradient(red,red) bottom center/calc(100% - 15px) 5px,
    linear-gradient(red,red) left center/5px calc(100% - 15px),
    linear-gradient(red,red) right center/5px calc(100% - 15px);
  background-repeat: no-repeat;
  display:inline-block;
}

<h1>
  A heading title
</h1>

您可以引入CSS变量以使其易于处理：

h1 {
  padding: var(--p,5px);
  margin:10px;
  background:
    linear-gradient(red,red) top center/calc(100% - var(--d,10px)) var(--p,5px),
    linear-gradient(red,red) bottom center/calc(100% - var(--d,10px)) var(--p,5px),
    linear-gradient(red,red) left center/var(--p,5px) calc(100% - var(--d,10px)),
    linear-gradient(red,red) right center/var(--p,5px) calc(100% - var(--d,10px));
  background-repeat: no-repeat;
  display:inline-block;
}

<h1>
  A heading title
</h1>

<h1 style="--p:10px;--d:20px">
  A heading title
</h1>
<h1 style="--d:30px">
  A heading title
</h1>
<h1 style="--d:0px">
  A heading title
</h1>