css里面的let,在css中创建类似边框效果的Droplet

使用

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%);

}

Lorem Ipsum Dolor Sit Amet

相关样本：

>此处可以获得用于生成类似图案但在底部而不是圆形处具有三角形切口的方法 – Making jagged triangle border in CSS.

>可以使用相同的方法生成顶部和底部边框等邮票.可以获得here的样本.在此答案中发布样本之前,我还没有遇到类似的问题和答案here.

>也可以使用相同的方法生成与液滴边界相反的边框(如下图所示).其样本可在here获得.