html多重边框，中间空白,【基础】CSS实现多重边框的5种方式

简言

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。

1 利用描边(outline)属性

方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单，兼容性好，能兼容除IE6,7以外的浏览器。

1.1 核心代码

.borders {

border: solid 6px #fff;

outline: solid 6px #888;

}

1.2 演示程序

1.3 说明

只能实现双重边框

边框样式灵活，可以实现虚线等样式的边框

描边在盒模型之外，会与外部元素发生重叠

2 利用额外的DIV

方案2利用额外的DIV嵌套的方式实现多重边框。这也是唯一不存在兼容性问题的方案。

2.1 核心代码

.outer {

border: solid 6px #888;

background: #fff;

}

.inner {

background: #222;

margin: 6px;

}

2.2 演示程序

2.3 说明

兼容性好

可以实现多重边框，虚线边框等样式

需要额外的DIV元素，增加了代码复杂性

3 利用伪元素

方案3利用伪元素(:before)的方式实现双重边框。实现代码略复杂，属于hack的实现方式，不推荐。

3.1 核心代码

.borders {

border: solid 6px #fff;

position: relative;

}

.borders:before {

content: "";

position: absolute;

top: -12px;

left: -12px;

right: -12px;

bottom: -12px;

border: solid 6px #888;

}

3.2 演示程序

3.3 说明

IE6,7,8不兼容

用:after也可以

同时应用:before和:after可以实现三重边框

4 利用border-image属性

方案4利用CSS3的border-image属性实现多重边框。实现方法简单，但需要制做一个额外的边框图片，兼容性较差。

4.1 核心代码

.borders {

border: solid 12px transparent;

border-image: url('borders.jpg') 12 12 12 12 repeat;

}

4.2 演示程序

4.3 说明

本例中，利用border-image-slice将边框图片分成如下图所示的9个区域：

其中包括四个角(1，2，3，4)，四条边(5，6，7，8)以及中间区域(9)。

repeat表示四条边都在相应的边框上重复的平铺。

5 利用box-shadow属性

方案5利用box-shadow属性实现多重边框。方案5是最简单，最直接的实现多重边框的方式。只有一行代码就可以实现多重边框效果。利用了阴影(box-shadow)实现边框多少有一些hack的味道。

5.1 核心代码

.borders {

box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;

}

5.2 演示程序

5.3 说明

为了用阴影模拟边框，本例中使用了两个阴影效果，设置偏移值和模糊值为0，并适当地设置阴影的尺寸，从而实现了双重边框的效果。因为一个阴影重叠在另一个阴影之上，第二个阴影的尺寸要设置成第一个阴影尺寸的两倍。关键部分是将模糊值设成0，从而产生像边框一样的纯色阴影，看起来和边框一样。

和描边(outline)属性一样，box-shadow属性可能会和周边元素发生重叠，因此要适当地设置元素的外边距。box-shadow兼容性一般。

6 参考

7 结语

本文简述了5种多重边框的实现方式，各有优缺点，大家要根据实际情况进行取舍。

文中所述部分文字及代码汇编于网络。因时间不足，能力有限等原因，存在文字阐述不准及代码测试不足等诸多问题。

CSS实现多重边框和内凹圆角

CSS实现多重边框

ImageView设置边框的两种方式

转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

CSS实现水平垂直居中的1010种方式

转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

【css】清除浮动的几种方式

[css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

CSS揭秘—多重边框(二)

前言: 所有实例均来自,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html:

css文件引人的三种方式

前言 1995年,W3C发布了CSS草案 1996年,W3C正式推出CSS1 1998年,推出CSS2 2001年从CSS3开始,CSS这门语言分割成多个独立的模块,每个模块独立分级,且只包含一小部分 ...

简单说 通过CSS实现 文字渐变色 的两种方式

说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码

【Java基础】JAVA 使用线程的几种方式

之前放在自己网站上的例子,因为网站关闭,已经找不到了,想用的时候,没有的话又重新翻书是很麻烦的事情.所以重新记录一下,以备将来查看. 第一种,让任务类继承Runable接口,然后将任务类对象放入Thr ...

随机推荐

《InsideUE4》UObject(二)类型系统概述

曾子曰:吾日三省吾身--为人谋而不忠乎?与朋友交而不信乎?传不习乎? 引言 上一篇我们谈到了在游戏引擎,或者在程序和高级编程语言中,设计一个统一对象模型得到的好处,和要付出的代价,以及在UE里是怎么对 ...

C数组下标越界

之前总听说C语言的各种毛病,今天算是遇到一个:数组下标越界 事情经过 两段完成不相干的代码,一段是测温度的,一段是测转速的.两段代码单独运行都没有问题,但是若运行测转速的代码,测温度的数据就会发生错误 ...

全键盘Vimium快捷键学习记录

0.设置而 vimium 的默认搜索引擎: http://www.baidu.com/s?wd= j: 向下细微滚动窗口.  k:向上细微滚动窗口. gg:跳转到页面的顶部.G:跳转到页面的底部.r: ...

asp.net Get和Post传参和接收参数

asp.netGet和Post传参和接收参数 Get请求: 对于传参:test.aspx?name=%e5%bc%a0%e4%b8%89 接收参数的方法: Request.QueryString[&q ...

loadrunner中创建唯一随机数

常用的时间唯一脚本: Action() { int id, scid; char *vuser_group,strid[5];       char proposalNo[1024]; int i; ...

POJ1523 SPF(割点模板)

题目求一个无向图的所有割点,并输出删除这些割点后形成几个连通分量.用Tarjan算法: 一遍DFS,构造出一颗深度优先生成树,在原无向图中边分成了两种:树边(生成树上的边)和反祖边(非生成树上的边). ...

如何使用sql语句使你的数据库减肥，下面以网狐6603数据库减肥脚本举例！

原文转自:http://www.zccode.com/forum.php?mod=viewthread&tid=637&extra=page%3D1 网狐6603 专用数据库减肥特效脚 ...

运算符 - PHP手册笔记

运算符优先级 每种编程语言都有运算符,运算符要学会灵活使用. 运算符拥有不同的优先级和结合方向. <?php var_dump(1 <= 1 == 1); // true var_dump ...

C&plus;&plus; 命名管道 与Winform跨进程通信

以下是.NET命名管道解决方案中几个主要的类. NamedPipeNative:这个类和kernal32.dll联系实现命名管道的通信,其中包含一些常用方法和常量. NamedPipeWrapper ...

C&num; Winform 对话框控件&amp&semi;简单记事本

一.对话框 1.弹出可供用户选择“确定”.“取消”的对话框 Dialogresult dr =  MessigeBox.Show("这里显示的是对话框的内容","这里显示 ...