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美化表单控件全集
Jun 29 HTML / CSS
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 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
PHP设计聊天室步步通
2006/10/09 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python登录注册验证功能实现
2018/06/18 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
安全生产管理责任书
2014/04/16 职场文书
暑假家长评语大全
2014/04/17 职场文书
创文明城市标语
2014/06/16 职场文书
2014年底工作总结
2014/12/15 职场文书
培训感想范文
2015/08/07 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
诉讼和解协议书
2016/03/23 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
变长双向rnn的正确使用姿势教学
2021/05/31 Python