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

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

解决方法

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

在下面的示例中,我使用了具有径向渐变背景的伪元素来模仿所示的边框效果.根据哪个边应该有边框,您可以调整伪元素的位置以实现效果.

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

您还可以调整background-size属性以在边框中实现更小/更大的圆圈.您还可以通过在径向渐变属性值中使用关键字ellipse而不是circle来在边框中生成椭圆图案而不是圆.

注意事项：

>警告：我添加此答案只是为了说明这种效果可以仅使用CSS3创建,但由于相对lesser browser support for radial-gradients而不推荐使用它.如果所有目标浏览器都支持它,可以使用它.
>如果你需要在所有方面都有这种边界效果,那么只有伪元素是不够的.您需要为每一侧添加额外的元素,然后根据需要定位它们.
>如果仅在顶部需要边框,则径向渐变背景也可以直接添加到主div.但是,对于底部边界定位/实现这种效果是不可能的,因此使用伪元素.
> border-image属性可以用于仅使用边框来实现相同的效果,但是它具有比径向渐变(甚至IE 10不支持它)更少的支持,因此不推荐/使用.
>以下代码在Firefox,Chrome,Opera和Safari中进行了测试,并且在IE 10中也可以使用,因为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%,transparent 55%);
    background-image: radial-gradient(circle at 50% 0%,transparent 55%);
}

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

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

解决方法

相关推荐