css3实现针线缝合效果(图解步骤)
发布时间:2013-02-04 10:40:36 作者:佚名 我要评论
什么是CSS3缝合效果,可以参考一下相关网站(IT EXPRESS)侧边栏就是用了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">
相关文章
- 推荐一款国外网站复制过来的类似lightbox弹出界面的效果。需要在支持CSS3属性的浏览器下浏览2013-03-19
- 3D字体而且还带有阴影,这种效果想必大家只有认为一些高级的作图工具才可以实现的吧,css3的出现让这一切看似不可能的实现成为可能,接下来为大家介绍下3D字体带阴影效果的2013-03-20
CSS3+jQuery实现的超酷动态阴影通过开关控制灯泡照射效果
灯泡可以通过开关控制,并且可以拖动灯泡,灯泡所在位置会被照亮2013-06-05- 无需图片和js代码即可实现图片、按钮等元素的阴影效果,完全通过样式控制阴影大小、方向和深度2013-06-20
- 在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜来实现,需要注意的是该滤镜必须配合background属性一起使用,否则该滤镜失效2013-09-11
- 不需要任何图片支持,完全依靠CSS3和JS代码既可以实现动态的3D文字2013-09-24
CSS3的text-shadow文字阴影属性实现乳白文字效果
一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果2014-03-10- 圆角、阴影、透明的实现方法有很多,之前的获取比较复杂,用CSS3就方便很多了,而且对浏览器的支持性也比较好,下面简单为大家介绍下2014-08-08
- 这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,尤其配合灰黑色的背景,让菜单显得有点立体的2014-10-20
- 今天我们要为大家带来一款很不错的HTML5/CSS3 3D图片特效,图片的边框有阴影,在图片翻转的时候还有很不错的投影效果。当鼠标滑过页面的时候图片就会出现翻转显示,同时伴2014-12-05
最新评论