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

Question

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

Answer 1

使用 CSS3 绝对可以创建这样的效果，但您需要的不仅仅是边框。

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

答案中提供的示例具有上边框的效果。如果您想要它作为底部边框，您可以参考this 示例。左/右边框也可以实现相同的效果，但需要更多调整。

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

注意事项：

1. 警告：我添加这个答案只是为了说明这种效果可以仅使用 CSS3 创建，但由于相对 lesser browser support for radial-gradients，目前不推荐使用它。如果您的所有目标浏览器都支持它，您可以使用它。
2. 如果您需要在所有方面都具有这种边框效果，那么仅使用伪元素是不够的。您需要为每一侧添加额外的元素，然后根据需要定位它们。
3. 如果只需要顶部边框，radial-gradient 背景也可以直接添加到主div。但是用它来定位/实现这种效果的底部边框是不可能的，因此使用了伪元素。
4. border-image 属性可用于仅使用边框来实现相同的效果，但它比 radial-gradients 的浏览器支持更少（即使 IE 10 也不支持它），因此不推荐/使用。
5. 以下代码已在 Firefox、Chrome、Opera 和 Safari 中进行了测试，并且应该也可以在 IE 10+ 中运行，因为 IE 9 及更低版本不支持 radial-gradients。

.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. 在此处提供相似图案但底部有三角形切口而不是圆形的方法 - Making jagged triangle border in CSS。

2. 同样的方法可以用于在顶部和底部制作类似边框的邮票。 here 提供了一个示例。还有一个类似的问题和答案here 在此答案中发布示例之前我没有遇到过。

3. 同样的方法可用于生成与水滴边界相反的边界（如下图所示）。 here 提供了一个示例。

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>

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%,transparent) 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>