今天小编跟大家讲解下有关css3实现针线缝合效果(图解步骤) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3实现针线缝合效果(图解步骤) 的相关资料，希望小伙伴们看了有所帮助。
什么是CSS3缝合效果 请看网站（IT EXPRESS）的侧边栏 就是用了CSS3的缝合效果做出来的。
首先我们准备一个不带阴影效果的DIV：
html代码：复制代码代码如下:<div class="noshadow_div">一个不带阴影效果的DIV</div> CSS代码：复制代码代码如下:.noshadow_div{ height:100px; width:500px; padding:20px; margin:15px; background:#6E6E6E; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font-size:24px; color:white; }效果图：
为不带阴影效果的DIV加上虚线边框
HTML代码：复制代码代码如下:<div class="noshadow_div_stitch">一个不带阴影效果的DIV加上虚线边框</div>CSS代码：复制代码代码如下:.noshadow_div_stitch{ height:100px; width:500px; padding:20px; margin:15px; background:#6E6E6E; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font-size:24px; color:white; border:2pxdashedrgba(255,255,255,0.8); } 效果图：
为加上虚线边框的DIV加上阴影
HTML代码：复制代码代码如下:<div class="shadow_div_stitch">为加上虚线边框的DIV加上阴影</div>CSS代码：复制代码代码如下: .shadow_div_stitch{ height:100px; width:500px; padding:20px; margin:15px; background:#6E6E6E; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font-size:24px; color:white; border:2pxdashedrgba(255,255,255,0.8); -moz-box-shadow:0004px#6E6E6E,2px1px4px4pxrgba(10,10,0,.5); -webkit-box-shadow:0004px#6E6E6E,2px1px4px4pxrgba(10,10,0,.5); box-shadow:0004px#6E6E6E,2px1px6px4pxrgba(10,10,0,.5); } 效果图：
以上为第一种方式实现缝合效果
下面开始第二种方式
我们有一个带实线边框 不带阴影效果的DIV
HTML代码：复制代码代码如下:<div class="noshadow_div_solid">一个不带阴影效果的DIV加上实线边框</div>CSS代码：复制代码代码如下:.noshadow_div_solid{ height:100px; width:500px; padding:20px; margin:15px; background:#6E6E6E; border:2pxsolidrgba(255,0,255,0.8); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font-size:24px; color:white; position:relative; z-index:0; } 效果图：
为加上实线边框不带阴影效果的DIV加上伪元素::before或:before
HTML代码：复制代码代码如下:<div class="noshadow_div_solid_stitch">为加上实线边框不带阴影效果的DIV加上伪元素,通过伪元素::before展现出来（兼容webkit、firefox、opera）</div> CSS代码：复制代码代码如下:.noshadow_div_solid_stitch{ height:100px; width:500px; padding:20px; margin:15px; background:#6E6E6E; border:2pxsolidrgba(255,0,255,0.8); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font-size:24px; color:white; position:relative; z-index:0; } .noshadow_div_solid_stitch:before{ border:2pxdashedrgba(255,255,255,0.8); top:3px; bottom:3px; left:3px; right:3px; position:absolute; z-index:-1; position:absolute; content:''; } 效果图：
以上即为两种实现针线缝合效果的例子
注：上面的缝合效果不适用于IE 要想在IE中实现上面效果 这里有一个简单的方法实现：
在页面的head部分加入下面代码复制代码代码如下:<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">
来源：爱蒂网
