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 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 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计算给定时间之前的函数用法实例
2015/04/03 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python文本数据相似度的度量
2018/03/12 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
妇女工作先进事迹
2014/08/17 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
SQL Server中锁的用法
2022/05/20 SQL Server