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动画(开启gpu加速)
Dec 23 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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学习 运算符与运算符优先级
2008/06/15 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
深入分析PHP设计模式
2020/06/15 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python实现GIF图倒放
2020/07/16 Python
Python过滤序列元素的方法
2020/07/31 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
Python 实现一个简单的web服务器
2021/01/03 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
2014迎国庆标语大全
2014/09/19 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS