11月15, 2017

实现虚线框的两种方式

背景: 实现虚线可以使用 border:2px dashed red; 但是这种方式不能定制虚线和实线的间隔,并且在不同浏览器下的效果也不一致。(IE下2像素的虚框是采用4-2-4-2的形式重复下去,转角等宽相连;Firefox和Chrome浏览器都是6-6-6-6的形式重复,虚框起点Firefox从实框顶端开始平铺,而Chrome不是。)

最终效果预览

  1. border-image( css3 属性) 使用方式:

     width: 260px;
     height: 180px;
     border-width: 6px;
     border-style: solid;
     -webkit-border-image: url(http://www.zhangxinxu.com/study/image/dashed_red2.png) 6 repeat;
     border-image: url(http://www.zhangxinxu.com/study/image/dashed_red2.png) 6 repeat;
     background: yellow;
    

    不细说,比较复杂的是图片的制作,参考张鑫旭老师博客实现兼容性的CSS粗虚线边框(dashed)效果

  2. svg svg 可以通过 dash-dasharray 来实现

     margin-top: 20px;
     width: 200px;   
     height: 150px;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"><path stroke="red" fill="none" stroke-width="1" stroke-dasharray="5" d="M0 0 L200 0 L200 150 L0 150 L0 0"></path></svg>');
     background-repeat: no-repeat;
    

    也可以直接在html中插入svg,这里是通过background-image方式实现。

本文链接:http://westpsk.com/post/border-dashed.html

-- EOF --

Comments