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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php实现的日历程序
2015/06/18 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python快速从注释生成文档的方法
2016/12/26 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Django 静态文件配置过程详解
2019/07/23 Python
python join方法使用详解
2019/07/30 Python
python中元组的用法整理
2020/06/15 Python
python与js主要区别点总结
2020/09/13 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
创建卫生先进单位实施方案
2014/03/10 职场文书
《菜园里》教学反思
2014/04/17 职场文书
篝火晚会策划方案
2014/05/16 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
财务会计岗位职责
2015/02/03 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
golang的文件创建及读写操作
2022/04/14 Golang