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 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php 操作调试的方法
2012/07/12 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
validator验证控件使用代码
2010/11/23 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python编码最佳实践之总结
2016/02/14 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
初任培训自我鉴定
2013/10/07 职场文书
入党自我评价优缺点
2014/01/25 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
书法大赛策划方案
2014/06/04 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server