一、box-shadow属性

box-shadow除了生成投影，还可以用来生成边框；它接受第4个值作为扩张半径，0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径，得到的显示效果和边框是一样的；但是注意，投影的行为和边框的行为不同，投影不影响布局；“假”边框在元素外面，不影响元素的点击（可以给box-shadow属性加上inset元素，来投影到原色内部）。

 <html>
 <head>
     <meta charset="utf-8">
     <title>多重边框</title>
     <style type="text/css">
     div{
         width:100px;
         height:60px;
         margin:25px;
         background: yellowgreen;

         box-shadow: 0 0 0 10px #665,
         0 0 0 15px deeppink,
         0 2px 5px 15px rgba(0,0,0,0.6);
     }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

二、outline方案

outline属性可以给边框再加上一层边框，相比用box-shadow实现，好处是，可以给边框指定不同的类型，而不只是实线；缺点是，只能指定两层边框。

 <html>
 <head>
     <meta charset="utf-8">
     <title>outline实现双重边框</title>
     <style type="text/css">
     div{
         width:100px;
         height:60px;
         margin:25px;
         background: yellowgreen;

         border:10px solid #665;
         outline:5px solid deeppink;
     }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

[css]《css揭秘》学习（二）-多重边框的更多相关文章

  1. CSS揭秘之《多重边框》

    1.box-shadow还接受第四个参数(称作"扩张半径"), 通过指定正值或负值, 可以让投影面积加大或者减小2.如果我们想要一道实线边框其实也是可以通过box-shadow来模 ...

  2. CSS入门基础学习二

    我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...

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

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

  4. CSS揭秘—多重边框（二）

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

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

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

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

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

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

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

  8. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  9. css多重边框

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

随机推荐

  1. BP神经网络的Java实现

    http://fantasticinblur.iteye.com/blog/1465497

  2. postgresql 数据库的备份和恢复 （pg_dump 和 pg_restore）

    pg_dump 用来备份数据库: pg_restore 用来恢复数据库: 备份出来的文件可以用 XZ (linux 自带的压缩工具压缩). XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您 ...

  3. uartz Spring与Spring Task总结

    Spring对Quartz作了一个封装,同时,Spring自己也提供了一个任务定时器(spring-task),现把它总结一下.    对于Quartz,我们使用的时候主要是注重两个方面,一个是定时任 ...

  4. yum groupinstall "Development Tools" 批量安装软件

    注:可以通过 yum grouplist 来查看可能批量安装哪些列表 从Windows转到Linux下面,一个不习惯的地方就是在图形界面下安装和删除软件的时候非常缓慢.但是如果你掌握了用yum的命令行 ...

  5. python threading模块中对于信号的抓取

    最近的物联网智能网关(树莓派)项目中遇到这样一个问题:要从多个底层串口读取发来的数据,并且做出相应的处理,对于每个串口的数据的读取我能想到的可以采用两种方式: 一种是采用轮询串口的方式,例如每3s向每 ...

  6. [noip2013]货车运输(kruskal + 树上倍增)

    描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的情况下,最多能运多 ...

  7. make执行过程

    转载自 陈皓<跟我一起写 Makefile> 一般来说,最简单的就是直接在命令行下输入make命令,make命令会找当前目录的makefile来执行,一切都是自动的.但也有时你也许只想让m ...

  8. word2010中，插入-符号-公式显示是灰色的解决办法

    在文件选项里点转换,把文档转换成最新格式,也就是2010,因为兼容旧版本模式(比方03,07)的文档是无法使用公式编辑器功能的 步骤: 1.点击“文件” 2.出现下图: 3.点击“转换”图标,将生成最 ...

  9. firefox 28.0

    Ubuntu 安装 firefox 28.0指令: apt-cache show firefox | grep Version sudo apt-get install firefox=28.0+bu ...

  10. JAVA 遍历文件夹下的所有文件(递归调用和非递归调用)

    JAVA 遍历文件夹下的所有文件(递归调用和非递归调用) 1.不使用递归的方法调用. public void traverseFolder1(String path) { int fileNum = ...