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

Question

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

Answer 1

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

在下面的示例中,我使用了一个带radial-gradient背景的伪元素来模仿所讨论的边框效果.根据哪个边应该有边框,您可以调整伪元素的位置以实现效果.

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

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

注意事项:

1. 警告:我添加此答案只是为了说明这种效果可以仅使用CSS3创建,但由于浏览器支持radial-gradients相对较少,因此不推荐使用它.如果所有目标浏览器都支持,则可以使用此选项.
2. 如果你需要在所有方面都有这种边框效果,那么只有伪元素是不够的.您需要为每一侧添加额外的元素,然后根据需要定位它们.
3. 在radial-gradient后台也可以直接添加到主div如果边界只需要在顶部.但是,对于底部边界定位/实现这种效果是不可能的,因此使用伪元素.
4. border-image属性可以用于仅使用边框来实现相同的效果,但是具有比radial-gradients(甚至IE 10不支持它)更少的支持,因此不推荐/使用.
5. 以下代码在Firefox,Chrome,Opera和Safari中进行了测试,并且也应该在IE 10+中工作,因为radial-gradientsIE 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. 可以使用相同的方法来生成与液滴边界相反的边界(如下图所示).用于该样本可在这里.