什么是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;
}

效果图:

css3实现针线缝合效果(图解步骤)

为不带阴影效果的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);
}

效果图:

css3实现针线缝合效果(图解步骤)

为加上虚线边框的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);
}

效果图:

css3实现针线缝合效果(图解步骤)

以上为第一种方式实现缝合效果

下面开始第二种方式

我们有一个带实线边框,不带阴影效果的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;
}

效果图:
css3实现针线缝合效果(图解步骤)

为加上实线边框不带阴影效果的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:'';
}

效果图:
css3实现针线缝合效果(图解步骤)

以上即为两种实现针线缝合效果的例子

:上面的缝合效果不适用于IE,要想在IE中实现上面效果,这里有一个简单的方法实现:

在页面的head部分加入下面代码

复制代码代码如下:
<metahttp-equivmetahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

标签:
针线缝合,css3阴影

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com

评论“css3实现针线缝合效果(图解步骤)”

暂无“css3实现针线缝合效果(图解步骤)”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。