前言：

　　　　所有实例均来自《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. web自动化上传附件 2

    当我们进行某一项web自动化脚本编写时,有上传附件操作,点击附件直接打开了windows窗口,而有的点击添加附件打开一个小窗体,再点击‘浏览’才打开windows窗口, 中间多了这么一个小窗体的操作, ...

  2. openstack系列文章(1)devstack安装测试Queens

    1.在OpenStack 圈子中,有这么一句名言:”不要让朋友在生产环境中运行DevStack.但是初学者在没有掌握OpenStack CLI的情况下用devstack安装测试环境还是不错的.本系列文 ...

  3. 《Oracle查询优化改写技巧与案例》学习笔记-------使用数字篇

    一个系列的读书笔记,读的书是有教无类和落落两位老师编写的<Oracle查询优化改写技巧与案例>. 用这个系列的读书笔记来督促自己学习Oracle,同时,对于其中一些内容,希望大家看到以后, ...

  4. tmux使用(程序员适用)

    原文:http://jack-boy.iteye.com/blog/1586908 tmux基本使用     tmux是一个优秀的终端复用软件,即使非正常掉线,也能保证当前的任务运行,这一点对于远程S ...

  5. centos 添加右键在终端打开

    yum -y install nautilus-open-terminal

  6. python基础之Day20part2

    面向过程:核心是过程,解决问题的步骤,先干嘛后干嘛,机械流水线 复杂问题流程化简单化但扩展性差 面向对象:核心是对象,是特征与对象的集合体,基于该思想编写程序,就好比上帝造世界,上帝式的思维方式 扩展 ...

  7. Python之路(第三十五篇) 并发编程：操作系统的发展史、操作系统的作用

    一.操作系统发展史 第一阶段:手工操作 —— 真空管和穿孔卡片 ​ 第一代之前人类是想用机械取代人力,第一代计算机的产生是计算机由机械时代进入电子时代的标志,从Babbage失败之后一直到第二次世界大 ...

  8. pclConfig.cmake or PCLConfig.cmake

    Could not find a package configuration file provided by "pcl" (requested  version 1.8) wit ...

  9. ubuntu 重启nginx遇到错误

    错误如下:Job for nginx.service failed because the control process exited with error code. See "syst ...

  10. Linux---一级/二级目录以及位置目录名/指令

    home目录:普通用户登录进来以后的初始位置(会在home目录下创建一个登录名相同的目录例如  / home / 用户名),如果是超级用户则就是 在根目录 /下的 root目录(也就是 /root) ...