css3完成针线缝合实际效果(图解流程)

2021-03-10 16:36 jianzhan

甚么是CSS3缝合实际效果？请看网站（IT EXPRESS）的侧面栏，便是用了CSS3的缝合实际效果做出来的。

最先大家提前准备1个不带黑影实际效果的DIV：

html编码：

拷贝编码

编码以下:

<div class="noshadow_div">1个不带黑影实际效果的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">1个不带黑影实际效果的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);
}

实际效果图：

以上为第1种方法完成缝合实际效果

下面刚开始第2种方法

大家有1个带实线边框，不带黑影实际效果的DIV

HTML编码：

拷贝编码

编码以下:

<div class="noshadow_div_solid">1个不带黑影实际效果的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:⑴;
position:absolute;
content:'';
}

实际效果图：

以上即为两种完成针线缝合实际效果的事例

注：上面的缝合实际效果不可用于IE，要想在IE中完成上面实际效果，这里有1个简易的方式完成：

在网页页面的head一部分添加下面编码

拷贝编码

编码以下:

<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

css3完成针线缝合实际效果(图解流程)

为您推荐