仅从角落移除边框（CSS）

Question

我想删除边框的角落  图片。

到目前为止，我已经尝试过::之前和::之后的伪元素，但我只能删除两个角落。

＆＃13;

＆＃13;

    .rounded-corner-div{
    min-height: 100px;
    padding: 10px 20px;
    border: 1px #000 solid;
    position: relative;
    }

    .rounded-corner-div::after,
    .rounded-corner-div::before {
      background-color: white;
      content: "";
      display: block;
      height: 10px;
      position: absolute;
      width: 10px;
    }

    .rounded-corner-div::after {
      bottom: -1px;
      right: -1px;
    }
    .rounded-corner-div::before {
      top: -1px;
      left: -1px;
    }

＆＃13;

<div class="rounded-corner-div"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您最终可以使用渐变和背景大小：

＆＃13;

＆＃13;

std::string

＆＃13;

.rounded-corner-div {
  min-height: 100px;
  padding: 10px 20px;
  position: relative;
  background: linear-gradient(to bottom, #000 1px, transparent 1px, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat, linear-gradient(to left, #000 1px, transparent 1px, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat;
  background-position: center;
  background-size: calc(100% - 1em) 100%, 100% calc(100% - 1em);
  /* extra for demo */
  display:flex;
  align-items:center;
  justify-content:center;
}

＆＃13;

＆＃13;

＆＃13;

如果您仍想使用伪元素，可以使用它们绘制边框：

＆＃13;

＆＃13;

<div class="rounded-corner-div ">
  test
</div>

＆＃13;

.rounded-corner-div {
  min-height: 100px;
  padding: 10px 20px;
  position: relative;
}

.rounded-corner-div::after,
.rounded-corner-div::before {
  content: "";
  position: absolute;
  pointer-events: none;
  /* to click through anytime */
  border: solid 1px;
}

.rounded-corner-div::after {
  left: 10px;
  right: 10px;
  top: 0;
  bottom: 0;
  border-left: none;
  border-right: none;
}

.rounded-corner-div::before {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  border-top: none;
  border-bottom: none;
}

＆＃13;

＆＃13;

＆＃13;