二十三、css如何实现锯齿形---border-image

最新推荐文章于 2024-11-21 16:34:07 发布

转载最新推荐文章于 2024-11-21 16:34:07 发布 · 602 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hbc1b20bb&title=%E4%BA%8C%E5%8D%81%E4%B8%89%E3%80%81css%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%94%AF%E9%BD%BF%E5%BD%A2---border-image

文章标签：

#html/css

前端专栏收录该内容

493 篇文章

订阅专栏

本文介绍了一种使用CSS border-image属性实现特殊锯齿边框效果的方法，通过具体代码示例展示了如何创建一个带有独特锯齿状边框的卡片元素。

css如何实现这样的样式：

解决方案：

这里需要用到的技术是border-image的灵活运用，首先需要一张图片，这里我选中的是这样子的，此后的图片可以拿这个更改圆形的颜色以更改锯齿颜色：

　　底部透明，正方形，ps截图如下：

好了，下面咱们就开始真正的代码：

html:

<section class="ele-card">
    <div class="ele-card-borderImage"></div>
</section>

css:

.ele-card{
    height: 130px;
    width: 70%;
    position: absolute;
    z-index: 99;
    top: 26%;
    left: 50%;
    margin-left: -35%;
    background: #fee94e;
}
.ele-card-borderImage{
    border-top: 15px solid transparent;
    border-image: url(../img/order_border-min.png) 111 44 round;
    width: 100%;
    position: relative;
    top: -4px;
}