锯齿图案制作的方法

原创 yaohui 随笔 CSS3 164阅读 2019-01-30 16:04:29 举报

锯齿图案制作的方法

锯齿图案的制作有两种方案

  1. 通过伪类和边框的圆点虚线完成
  2. 通过径向渐变完成

先画一个基础的盒子

方案一:
第一步: 定位伪类的基本位子

添加上述代码后,在红色的左右两侧会出现黄色2px竖条

稍等 这里把一些公用的代码抽离出来

CSS中有很多公用的代码 可以抽离出来,以后容易维护
第二步: 添加圆点边框


在黄色竖条上面出现了圆点虚线

第三步: 去掉黄色的背景图片,然后利用overflow的剪裁特性将超出的部分隐藏,最后将白色圆点改成与背景色相同颜色就OK

方案二:
首先也画一个基础盒子出来

利用CSS渐变特性进行处理代码简洁

上述两种方案 第一种方案兼容 IE9+ 第二版本兼容IE10+ 在一些屏幕中有可能存在不平滑的现象
示例的全部代码:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复