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


Posted in HTML / CSS onFebruary 04, 2013

什么是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">
HTML / CSS 相关文章推荐
css3 border旋转时的动画应用
Jan 22 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 #HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 #HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 #HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 #HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 #HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 #HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 #HTML / CSS
You might like
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
理解JavaScript原型链
2016/10/25 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
js中new一个对象的过程
2017/02/20 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Python生成验证码实例
2014/08/21 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python 实现简单的电话本功能
2015/08/09 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python图像和办公文档处理总结
2019/05/28 Python
使用python实现简单五子棋游戏
2019/06/18 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
大学生个人事迹材料
2014/01/21 职场文书
外贸专业求职信
2014/03/09 职场文书
聘用意向书
2014/07/29 职场文书
工作证明格式及范本
2014/09/12 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书