在css中创建类似边框效果的Droplet

Question

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

Answer 1

使用CSS3创建这样的效果肯定是可能的，但你需要的不仅仅是边框。

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

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

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

注意事项：

1. 警告：我添加此答案只是为了说明这种效果可以仅使用CSS3创建，但由于相对{{3}而不推荐使用它}。如果所有目标浏览器都支持，则可以使用此功能。
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. 此处提供了在底部而不是圆形处生成相似图案但带有三角形切割的方法 - lesser browser support for radial-gradients。

2. 同样的方法可以用于在顶部和底部生成边框等邮票。有一个样本Making jagged triangle border in CSS。还有一个类似的问题和答案here，在此答案中发布样本之前我没有遇到过。

3. 可以使用相同的方法生成与液滴边界相反的边框（如下图所示）。可提供的示例here。

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>