Question

试图弄清楚如何通过CSS或JavaScript / jQuery在图像周围的CSS左边框中创建间隙。

我找到了几个答案，如何在顶部或底部边框上留有间隙，但无法弄清楚如何将其应用于左边框。

到目前为止，这是我的HTML：

<div class="frame">
  <img class="quote" src="quote.jpg">
   <h2>Heading<h2>
   <p>Lorem ipsum<p>
</div>

这是CSS：

.frame {
    Border-top: 10px sloid grey;
    Border-right: 10px sloid grey;
    Border-bottom: 10px sloid grey;
}
.quotes {
    position: relative;
    right: 100px;
}

Answer 1

您可以使用:before和:after等伪元素来完成此操作。

＆＃13;

.box {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 50px;
  border: solid #000;
  border-width: 5px 5px 5px 0;
}

.box:before,
.box:after {
  content: '';
  position: absolute;
  background: #000;
  height: 30%;
  width: 5px;
  top: 0;
  left: 0;
}

.box:after {
  top: auto;
  bottom: 0;
}

＆＃13;

<div class="box"></div>

＆＃13;

Answer 2

最好的想法我可以用最少的要求来提出：

使用::before/::after pseudo elements将背景颜色匹配元素放在现有边框的顶部。这基本上是＆＃34;切片＆＃34;边界的一部分。

HTML：

<div class="wrap">
  <div class="box"></div>
</div>

CSS：

.wrap { position: relative; width: 300px; height: 300px; background-color: #fff; }
.box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 200px; border: 10px solid #8af; }
.box::before { content: ''; position: absolute; width: 10px; height: 100px; margin: auto; left: -10px; top: 0; bottom: 0; background-color: #fff; }

JSFiddle：https://jsfiddle.net/gam9s0mz/

编辑如上所述，此方法不适用于背景图像。但只有稳固的背景颜色匹配。

如何在图像周围的CSS左边框中创建间隙？

2 个答案: