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. C++基础学习10：继承

    继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法(函数)和属性(成员变量)的过程.如果类B继承于类A,那么B就 ...

  2. UITableView 编辑模式(增加-删除-移动---自定义左滑 title) xib cell

    参考:  http://www.open-open.com/lib/view/open1430008922468.html - (void)viewDidLoad { [super viewDidLo ...

  3. angularJs基础学习

    实例化一个angularJs模块 <body class="hold-transition skin-red sidebar-mini" ng-app="app&q ...

  4. C# web项目添加*.ashx文件后报错处理

    说明:我是菜鸟,博文水平有限,仅作学习过程中的备忘笔记 1.截图信息: ———————————————————————————————————————————————————————————————— ...

  5. 洛谷1026（字符串dp）

    常规dp.看到数据很小就直接暴力了,没有预处理.kmp好像过分了-- #include <cstdio> #include <cstring> #include <ios ...

  6. nginx配置应用

    启动nginxvim /usr/local/lnmp/nginx/conf/nginx.conf mkdir /wwwcd /wwwvim index.html www.westos.orgmkdir ...

  7. Docker & ASP.NET Core 教程

    第一篇:把代码连接到容器 第二篇:定制Docker镜像 第三篇:发布镜像 第四篇:容器间的连接 第五篇: Docker & ASP.NET Core (5):Docker Compose AS ...

  8. 8php字符串的方法

    <?php/** * Created by PhpStorm. * User: DY040 * Date: 2017/9/8 * Time: 16:46 *//*php也有转义字符/*///ec ...

  9. 18-----BBS论坛

    BBS论坛(十八) 18.首页轮播图实现 (1)front/css/front_base.css .main-container{ width: 990px; margin: 0 auto; over ...

  10. my.宠物升级79级

    1.蚌仙子 74级半不到的时候,吃  月华露(500000经验的那种)  吃3个 正好 79级半 我记得 之前 是升满75级 再吃月华露 到79级的时候 经验溢出了.不突破还好,突破的话 宠物就升级了 ...