共享博客利用css的 border-image 实现锯齿形
css如何实现这样的样式：
解决方案：
这里需要用到的技术是border-image的灵活运用，首先需要一张图片，这里我选中的是这样子的，此后 的图片可以拿这个更改圆形的颜色以更改锯齿颜色：
立即学习“前端免费学习笔记（深入）”；
底部透明，正方形，ps截图如下：
好了，下面咱们就开始真正的代码：
html:
<section> <p></p></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;}
文章推荐
-
HTML在线编辑器的调用方法和使用方法
html在线编辑器不需要懂得使用dreamweaver，会用word就会使用此编辑器，在文章系统或者是新闻系统需要文字编...
H5教程
1年前 (2024-10-19) 467 -
AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
使用姿势在设计全屏滚动插件的时候，希望开发者几乎：不用写任何脚本快速生成精致H5支持PC滚轮和移动触摸酷炫的转场动效灵活...
H5教程
1年前 (2024-10-19) 456 -
HTML5 js实现拖拉上传文件功能
在html5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ...
H5教程
1年前 (2024-10-19) 458 -
Canvas and Drawables 翻译第一集
android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
1年前 (2024-10-19) 476 -
Canvas and Drawables 翻译第三集
Android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
1年前 (2024-10-19) 471