前言：
所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知
该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正
注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习
我会在每个示例最后附上书中提供的在线示例代码链接；
我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的
CSS需知：
场景：
如果让你实现下图多重边框的效果，你会怎么做呢？
可能聪明的你首先想到利用 outline 属性来实现，如下代码
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
border: 10px solid #655;
outline: 10px solid deeppink;
}
如果你还想加上阴影效果，使用box-shadow 属性即可，
box-shadow: 10px 10px 5px 10px rgb(0,0,0,.5);
问题：
现在有个问题，如果多重边框像上面一样只有2重，那使用 outline 属性是没有问题的。
但如果是3重，4重，甚至更多重边框的情况就行不通了，如下图，3重边框
解决方法：
上面问题只需用 box-shadow 属性，即可迎刃而解。
box-shadow支持逗号分隔，比如像下面这样，想加几个边框就加几个，用逗号分隔开就行
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink, 0 0 0 30px brown;
注：这里要注意 box-shadow的第四个属性，表示阴影的大小（就是上面代码的10px，20px，30px）
如果你想要添加多条边框，就需要把阴影大小的值依次递增，否则无效
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
注：如果你还要添加阴影效果，也需要把阴影大小的值进行调整，只能 >= 你设置的最后一条边框的阴影大小值
比如上面代码中的3条边框阴影大小值分别为，10px，20px，30px，那后面阴影的值只能设置30px，或比30px大
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 20px deeppink,0 0 0 30px brown, 10px 10px 5px 30px rgb(0, 0, 0, .5);
}
</style>
</head> <body> <div></div>
</body> </html>
书中在线实例链接：http://dabblet.com/gist/012289cc14106a1bd7a5
CSS揭秘—多重边框（二）的更多相关文章
-
CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
-
[css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
-
CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
-
【基础】CSS实现多重边框的5种方式
简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...
-
CSS揭秘—透明边框（一）
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
-
[css]《css揭秘》学习（二）-多重边框
一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...
-
CSS揭秘之多重边框&;连续的图像边框
1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
-
CSS揭秘（二）背景与边框
Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
-
css多重边框
一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...
随机推荐
-
em换算px,rem换算px
<body> <style type="text/css" rel="stylesheet"> html,body{ font-size ...
-
《CLR.via.C#第三版》第二部分第4，5章节读书笔记(二)
这两章全是理论性的东西,我觉得不必过于钻牛角尖.理论这东西,只有在长期的实践中去慢慢领悟才会深刻.下面我只写些我认为重要的关键知识. (一)类型转换 知识点:向基类型的转换被认为是一种安全的隐式转换: ...
-
G2 DT时代的图形语法 正式发布
G2有一个高大上的名字叫做:The Grammar Of Graphics——图形语法.它是一个强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大 ...
-
微软Team Foundation Service 的Scrum模板中的Feature和Backlog Items 的区别【转载】
Features help us plan work better in Team Foundation Service Scrum process [原文:http://www.nsilverbul ...
-
you-get中文说明
来源于:https://github.com/soimort/you-get/wiki/%E4%B8%AD%E6%96%87%E8%AF%B4%E6%98%8E You-Get 乃一小小哒命令行程序, ...
-
Usermod 命令详解 ------工作中修改shell时用 usermod -s /bin/csh home
Usermod 命令详解 2012-09-11 11:01:36 标签:usermod 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.htt ...
-
在navgationController中添加UISegmentedControl
NSArray *segmentedArray = [NSArray arrayWithObjects:@"患者基本信息",@"患者信息",nil]; UISe ...
-
Tuning 01 Overview of Oracle Performance Tuning
永无止境的调优 service level agreements: 是一个量化的调优的指标. performance 只要满足业务OK就可以了, 没必要调的很多, 因为有得必有失, 一方面调的特别优化 ...
-
maven package:Max maven Unsupported major.minor version 51.0
编译maven项目时报错:Max maven Unsupported major.minor version 51.0 major.minor version 51.0 对应的是JDK1.7 majo ...
-
python之路—博客目录
python基础一 格式化输出&初始编码&运算符 数据类型&字符串得索引及切片 列表 & 元组& join & range 字典dict python2 ...