纯 CSS 中带有描边的弧形边框？

Question

我想知道仅使用 CSS 是否有可能实现弯曲的边框（带有笔划）？目前，我正在使用图像为我网站的 header 创建弧形边框：

我想将其更改为 CSS 解决方案，这样我就不必在内容量发生变化时更改图像 - 我需要这些是动态的和响应的，我已经设法使用 border-radius:

绘制曲线

这对我来说效果更好，但我想知道是否可以为其添加笔触以使其看起来更像图像表示？任何帮助是极大的赞赏。这是我为实现此目的而编写的代码：

<div class="slider">
  <div class="slide">
    <!-- Content -->
  </div>
</div>

CSS:

.slider {
  background: #21639e;
}
.slider .slide {
  background: url("image.jpg") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
}

我确实尝试将 border-bottom: 5px solid #fff; 添加到 .slide class，但它最终看起来像这样：

我创建了一个 jsfiddle 供您测试我正在努力实现的目标。

Answer 1

是的，您可以尝试使用方框阴影来创建这种边框。在元素的外侧应用白色框阴影会使它看起来像 stroke/border.

这 - border-bottom: 5px solid #fff; 产生了一种不同的效果，因为我们只对元素应用了底部边框。左边和右边的边框不存在（零宽度）所以当你靠近边缘时线条变细。

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  height: 200px;  
  background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>

以下是您的 Fiddle.

的更新版本

想要更优美的曲线也可以试试下面的方法。它使用一个比 .slide 宽的伪元素，然后将图像居中。（我觉得这种方法使它看起来更接近原始图像，但选择是你的）

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.slider .slide:before {
  position: absolute;
  content: '';
  left: -2%;
  top: -6px;
  width: 104%;
  height: 100%;
  background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>

纯 CSS 中带有描边的弧形边框？

Curved border with stroke in pure CSS?

css

border

css-shapes