什么是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-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">
分享到:
相关推荐
什么是CSS3缝合效果,可以参考一下相关网站(IT EXPRESS)侧边栏就是用了CSS3的缝合效果做出来的,感兴趣的朋友可以了解下,或许本文对你学习css3有所帮助
Html5+js+CSS3实现3D旋转效果
使用纯CSS3实现图片轮播效果源码免费下载 使用纯CSS3实现图片轮播效果源码免费下载
css3实现平滑过渡效果
CSS3实现烟花特效-图片+css
Turn.js:基于 HTML5 & CSS3 实现翻书效果,很好的翻书效果插件
纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果
css3实现3D时间轴效果
CSS3实现兴趣图谱效果 CSS3实现兴趣图谱效果网页特效.zip
使用 CSS3 实现 3D 图片滑块效果
纯css3实现的折角效果 纯css3实现的折角效果网页特效.zip
css3实现导航动画效果transform及transition css3实现导航动画效果transform及transition
随着CSS3+HTML5的发展,现在对它们的需求也越来越大,我这里是纯css3实现的折角效果,希望能帮到大家
CSS3实现的多种鼠标点击效果,很有立体感,创意感
jQuery+css3实现3D翻书页面布局效果demo很简单
分享纯css3实现时钟效果,供大家一起共同分享学习。
CSS3实现兴趣图谱效果是一款基于jquery CSS3实现的仿百度兴趣图谱动画特效。
纯CSS3实现的翻页效果源码 鼠标悬停在页面上翻页,移开鼠标翻回来。 只支持webkit内核浏览器(如:iphone、ipad、android浏览器,及PC上的Chrome、Safari浏览器)
2.需要使用css3中的至少两种效果,并且用到css3的地方请注释,例如阴影效果,动画效果,2D转换,3D转换,css3过渡等等。 3.要求css样式写在head的style里,或者新建一个css文件写在里面。图片放在单独建立的文件夹下...