在CSS中创建像水滴一样的边框效果

Question

我在Photoshop中创建了这个边框设计，想知道是否有人能指导我如何使用css重新创建它。

- cheese12345

---

底部对齐容器的背景图片怎么样？ - Joseph Marikle

我本来想这样做，但我想知道是否有人能够提出一个纯CSS的替代方案。@JosephMarikle - cheese12345

我认为使用简单的CSS无法实现这种特定的边框（可能需要使用大量对象来完成）。也许可以尝试使用border-image。http://demosthenes.info/blog/446/Turn-Images-Into-Postage-Stamps-With-CSS3-border-image - James Korden

@harry 是的，谢谢。 - cheese12345

Answer 1

使用CSS3创建这样的效果是完全可能的，但您需要的不仅仅是边框。

在下面的示例中，我使用了一个伪元素和一个radial-gradient背景来模拟问题中显示的边框效果。根据哪一侧应该有边框，您可以调整伪元素的定位来实现效果。

答案中提供的示例具有顶部边框的效果。如果您想要底部边框的效果，则可以参考此示例。同样，左/右边框也可以实现，但需要进行更多的微调。

您还可以调整background-size属性以实现边框中更小/更大的圆圈。您还可以通过在radial-gradient属性值中使用关键字ellipse而不是circle来在边框中产生椭圆形图案。

注意事项：

1. 注意: 我添加这个答案只是为了说明可以仅使用CSS3来创建此效果，但由于radial-gradients的浏览器支持相对较少,我不建议现在就使用它。如果您的目标浏览器都支持它，您可以使用它。
2. 如果您需要在所有边上都有这种边框效果，那么仅使用伪元素是不够的。您需要为每个边添加额外的元素，然后根据需要定位它们。
3. 如果仅需要在顶部添加边框，则可以直接将radial-gradient背景添加到主要的div中。但是，无法使用它来定位/实现底部边框的效果，因此使用伪元素。
4. 可以使用border-image属性仅使用边框来实现相同的效果，但是它的浏览器支持甚至比radial-gradients还要少（即使IE 10也不支持），因此不建议使用。
5. 以下代码已在Firefox、Chrome、Opera和Safari中进行了测试，并且应该在IE 10+中工作，因为radial-gradients在IE 9及以下版本中不受支持。

.bordered{
    position: relative;
    height: 75px;
    width: 100%;
    border-top: 40px solid black;
    background: #EEE;
    padding-top: 10px;
}
.bordered:before{
    position: absolute;
    content: '';
    top: 0px;
    height: 8px;
    width: 100%;
    background-size: 12px 12px;
    background-position: -5px -3px;
    background-image: -webkit-radial-gradient(50% 0%, circle, black 50%, transparent 55%);
    background-image: -moz-radial-gradient(50% 0%, circle, black 50%, transparent 55%);
    background-image: radial-gradient(circle at 50% 0%, black 50%, transparent 55%);
}

<div class="bordered">Lorem Ipsum Dolor Sit Amet</div>

---

相关示例：

1. 这里提供了一种制作底部带有三角形剪切而不是圆形的类似图案的方法 - 使用CSS制作锯齿状三角形边框。

2. 同样的方法可以用于制作像邮票一样的顶部和底部边框。一个示例可在此处找到。还有一个类似的问题和答案此处，在发布本答案之前我没有看到过。

3. 同样的方法也可以用于制作与液滴边框相反的边框（如下图所示）。一个示例可在此处找到。

- Harry

Answer 2

除了@Harry的答案 - （这可能是解决此问题的最佳方法）...

我们还可以使用webkit的“text-stroke”属性通过在字符（如“0”）上设置粗笔画来实现此效果。

我们可以通过更改笔画厚度和字符的字体大小来微调此效果。

div{
    position: relative;
    height: 75px;
    width: 100%;
    border-bottom: 20px solid black;
    background: #EEE;
    padding-top: 10px;
}
div:after{
    position: absolute;
    content: '00000000000000000000000000000000000000000000000000000000000';
    font-size: 30px;
    -webkit-text-stroke: 10px black;
    text-stroke: 10px black;
    bottom:-35px;
    left:0;
    width: 100%;
    overflow:hidden;
}

<div>Lorem Ipsum Dolor Sit Amet</div>

- Danield

---

这实际上是一个非常有趣的选项。不知道Firefox和IE是否支持？ - Harry

@Harry 目前的支持仅限于 Webkit 和 Android (!!)。http://caniuse.com/#feat=text-stroke - Danield

Answer 3

使用遮罩的想法，我们可以轻松考虑所有的边缘，并使用任何类型的背景。如果您想要轻松生成代码，我制作了一个在线生成器。

.box {
  --b:10px; /* border thickness */

  width: 150px;
  height: 150px;
  margin: 10px;
  box-sizing: border-box;
  display: inline-block;
  border: var(--b) solid transparent;
  background: red;
  -webkit-mask:
    radial-gradient(farthest-side,#fff 97%,#0000) 0 0/calc(2*var(--b)) calc(2*var(--b)) round,
    linear-gradient(#fff 0 0) padding-box;
}

body {
  background:lightgrey;
}

<div class="box"></div>
<div class="box" style="--b:20px;border-left:0;border-right:0;background:linear-gradient(45deg,red,blue) border-box"></div>
<div class="box" style="--b:5px;border-top:0;border-bottom:0;background:url(https://picsum.photos/id/129/300/300) center/cover border-box"></div>
<div class="box" style="--b:15px;border-left:0;border-right:0;border-bottom:0;background:conic-gradient(red,green,blue) border-box"></div>
<div class="box" style="--b:25px;border-left:0;border-right:0;border-top:0;background:repeating-linear-gradient(45deg, #000 0 10px,pink 0 20px) border-box"></div>
<div class="box" style="--b:40px;border-left:0;border-top:0;background:repeating-radial-gradient(circle, red 0 10px,green 20px) border-box"></div>

- Temani Afif