前言：

　　　　所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知

　　　该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正

　　　注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习

　　　　　我会在每个示例最后附上书中提供的在线示例代码链接；

　　　　　我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的

　　CSS需知：

　　　　box-shadow

outline

　　场景：

　　　　如果让你实现下图多重边框的效果，你会怎么做呢？

　　　　

　　　　可能聪明的你首先想到利用 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揭秘—多重边框（二）的更多相关文章

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

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  2. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  3. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  4. 【基础】CSS实现多重边框的5种方式

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

  5. CSS揭秘—透明边框（一）

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

  6. [css]《css揭秘》学习（二）-多重边框

    一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...

  7. CSS揭秘之多重边框&连续的图像边框

    1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...

  8. CSS揭秘（二）背景与边框

    Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...

  9. css多重边框

    一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...

随机推荐

  1. 使用Tenorshare iCareFone for mac为iPhone做系统修复

    tenorshare icarefonemac中文版采用一键式方法来保护,修理,清洁,优化并最终加快您的iPhone,iPad和iPod的速度.它可以帮助您轻松解决所有iOS问题,并让您的iPhone ...

  2. Maven 属性

    maven 中使用 ${属性名} 来访问属性 内置属性 (maven 预定义,用户可以直接使用的属性) ${basedir}  表示项目根目录,即包含 pom.xml 文件的目录.同 ${projec ...

  3. Java发送手机短信（附代码和解析，亲测有效，简便易操作）

    这个方法用的是中国网建SMS短信通相关依赖进行操作的~~ 很简单,仅需要三步,第二部代码直接复制,不需要修改,第三部中的用户名和密钥修改成自己的即可 <1> 首先需要导入三个jar包 &l ...

  4. Python学习：经典编程例题

    九九乘法表 ,): ,i+): print(i,'*',j,'=',i*j,end='\t') print() 水仙花数问题描述:100-999之间每个数的立方相加等于原数例如:153=1 ^ 3 + ...

  5. HTTP之状态码

    状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收.理解.接受 3xx:重定向--要完成请求必须进行 ...

  6. 解决build workspace 缓慢的问题

    (1).解决方法         方法1.修改eclipse启动文件 eclipse.ini 中添加启动参数参数: -vmargs -Xmx512m         方法2.关闭自动构建工作区: pr ...

  7. ConcurrentDictionary

    ConcurrentDictionary ConcurrentDictionary一大特点是线程安全,在没有ConcurrentDictionary前 在多线程下用Dictionary,不管读写都要加 ...

  8. MySQL远程连接失败(错误码:2003)

    一 环境信息 服务器系统:Ubuntu 18.04 服务器MySQL版本:14.14 Distrib 5.7.25 本地系统:Kali Linux 本地客户端:python3交互模式 本地开发环境:p ...

  9. 实战操作——通过wireshark查看任意qq好友IP

    今天有群里好友问我如何查看别人IP,查IP这个东西对于一些刚入门的小白来说可能是一个比较高大上的玩意,但是实际上只需一个网络协议分析工具就OK,废话不多说,下面开始实践 实验对象:任意QQ好友 操作工 ...

  10. Linux 第十四天

    6)Bash常用快捷键 快捷键 作用 ctr1+ a 把光标移动到命令行开头.如果我们输入的命令过长,想要把光标移| 动到命令行开头时使用. ctr1+e 把光标移动到命令行结尾. ctr1+c 强制 ...