CSS实现多重边框

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>CSS实现多重边框</title>

     <style>

         div {

             width: 100px;

             height: 150px;

             margin: 40px auto;

             text-align: center;

             background: lightblue;

             border: 20px solid cornflowerblue;

         }

         #box1 {

             outline: 5px solid chocolate;

             outline-offset: -10px; /*outline描边模拟的边框会在真正边框的里面，但是描边没有办法贴合圆角的位置*/

         }

         #box2 {

             /*盒子阴影实现双重边框，第四个参数表示投影扩张的像素，","分隔绘制多个投影*/

             -webkit-box-shadow: 0 0 0 5px brown,

                                 0 0 0 10px yellow,

                                 0 0 0 15px green;

             -moz-box-shadow: 0 0 0 5px brown,

                              0 0 0 10px yellow,

                              0 0 0 15px green;

             box-shadow: 0 0 0 5px brown,

                         0 0 0 10px yellow,

                         0 0 0 15px green;

             -webkit-border-radius: 20px;

             -moz-border-radius: 20px;

             border-radius: 20px;

         }

     </style>

 </head>

 <body>

 <div id="box1">box1</div>

 <div id="box2">box2</div>

 <h1>box1和box2的绘制方式都不会影响布局</h1>

 </body>

 </html>

CSS实现内凹圆角的思路【截图来自慕课网】：

CSS实现多重边框和内凹圆角的更多相关文章

  1. css边框内凹圆角，解决优惠券的边框问题

    关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...

  2. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  3. CSS-论css如何纯代码实现内凹圆角

    background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 这是做内凹圆角的核心代码,就是背景图的ra ...

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

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

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

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

  6. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

  7. css多重边框

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

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

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

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

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

随机推荐

  1. 10.18 NOIP2018提高组模拟题（二）

    大水题 1.咒语 (curse.pas/c/cpp) [题目描述] 亮亮梦到自己来到了魔法城堡,但一扇巨大的石门阻拦了他通向城堡内的路.正当他沮丧之际,突然发现门上有一处机关,机关上有一张很长的纸条. ...

  2. charset=iso-8859-1

    今天群里有人在问, 求解:charset="ISO-8859-1"是什么意思 其实我也不大懂,然后就去翻阅了下资料.科普开始: 网页制作中遇到的编码,乱码问题之一:charset= ...

  3. 关于NSFetchedResultsController的一些用法

    如何在iPhone等设备持久保存数据,需要用到Core Data,它能帮你快速而有效率的完成数据储存,Core Data 编程经常用到 NSFetchedResultsController这个类,刚开 ...

  4. J.U.C-其他组件

    J.U.C-其他组件 FutureTask   介绍Callable时我们知道它可以有返回值,返回值通过Future进行封装.FutrueTask实现了RunnableFuture接口,该接口继承了R ...

  5. winfom实现关闭后一直运行

    using PLog; using System; using System.Collections.Generic; using System.Diagnostics; using System.L ...

  6. 谷歌通过ajax获取本地JSON文件，为什么会显示跨域？转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  7. 新建maven 父子模块项目

    第一步: 第二步: 先创建个简单的空架结构作为父项目 第三步: 创建子项目 第四步: 切换显示不同的maven子项目显示方式 关于maven中的parent聚合一直都有没好好总结,固有这篇. ---- ...

  8. tomcat 修改根路径

    修改setting.xml 在 </Host> 正上面 添加 <Context path="/" docBase="/TomExam" deb ...

  9. spring 和 spirngMvc 中 异常处理

    spring 中 的 异常处理 使用的是aspectj @Aspect @Component /** * * @author **** * @createData 2017年7月13日 上午8:36: ...

  10. freemarker 定义公共header

    <#--公共顶部--> <#macro header title="默认文字" keywords="默认文字" description=&qu ...