在css中创建像border效果的小滴 [英] Creating a droplet like border effect in css

问题描述

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

解决方案

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

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

答案中提供的示例对顶部边框有效果。如果您想将其用于下边框，可以参考。

方法可用于在顶部和底部生成类似边框的邮票。有关示例，请访问

I created this border design in Photoshop and was wondering if anyone could give me some guidance with how to recreate this using css.

解决方案

Creating an effect like this is definitely possible using CSS3 but you would need more than just the border for that.

In the below sample, I have used a pseudo-element with a radial-gradient background to mimick the border effect shown in question. Depending on which side should have the border, you can tweak the positioning of the pseudo element to achieve the effect.

The sample provided in the answer has the effect for the top border. If you want it for bottom border, you can refer to this sample. The same can be achieved for left/right border also but would need a bit more tweaking.

You can also tweak the background-size property to achieve smaller/larger circles in the border. You can also produce an ellipse pattern instead of a circle in the border by using the keyword ellipse instead of circle in the radial-gradient property value.

Points to note:

1. Caution: I am adding this answer only to illustrate that this effect is possible to create using just CSS3, but wouldn't recommend it for usage just as yet because of the relatively lesser browser support for radial-gradients. You can use this if all your target browsers support it.
2. If you need this border effect on all sides, then just pseudo-elements would not be enough. You would need extra elements for each side and then position them as required.
3. The radial-gradient background could also be directly added to the main div if the border is only required on the top. But positioning/achieving this effect for a bottom border wouldn't be possible with it and hence the use of a pseudo-element.
4. border-image property can be used to achieve the same effect using just borders but that has even lesser browswer support than radial-gradients (even IE 10 doesn't support it) and hence not recommended/used.
5. The below code was tested in Firefox, Chrome, Opera and Safari and should also work in IE 10+ as radial-gradients are not supported in IE 9 and less.

.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>

---

Related Samples:

1. The method for producing a similar pattern but with triangular cuts at the bottom instead of a circle is available here - Making jagged triangle border in CSS.

2. The same method can be used for producing a postage stamp like border on top and bottom. A sample for that is available here. There is also a similar question and answer here which I had not come across before posting a sample in this answer.

3. The same method can be used to produce a border that is the inverse of the droplet border also (like in the image present below). A sample for that is available here.

这篇关于在css中创建像border效果的小滴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！