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. 二维树状数组总结&&【洛谷P4514】 上帝造题的七分钟

    P4514 上帝造题的七分钟 题目描述 "第一分钟,X说,要有矩阵,于是便有了一个里面写满了00的n×mn×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a,b)(a,b),右下 ...

  2. 最短路【bzoj1726】: [Usaco2006 Nov]Roadblocks第二短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她 ...

  3. linux系统安全加固--账号相关

    linux系统安全加固 一.账号相关 1.禁用或删除无用账号 减少系统无用账号,降低安全风险. 当我们的系统安装完毕后,系统默认自带了一些虚拟账户,比如bin.adm.lp.games.postfix ...

  4. JTAG与JLink说明

    JTAG接口解读 通常所说的JTAG大致分两类,一类用于测试芯片的电气特性,检测芯片是否有问题:一类用于Debug:一般支持JTAG的CPU内都包含了这两个模块. 一个含有JTAG Debug接口模块 ...

  5. Oozie的缺点

    Oozie使用的时候有以下不便: [a]Oozie调度的Workflow只能使用XML文件配置 [b]启动调度只能通过命令行 [c]无法通过Oozie界面调试调度脚本 [d]Oozie无法可视化调试脚 ...

  6. python模块之openpyxl扩展

    主要是对openpyxl扩展进行扩展,使用归类等 1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win- ...

  7. java中使用nextLine(); 没有输入就自动跳过的问题？

    [问题分析] 必要的知识:in.nextLine();不能放在in.nextInt();代码段后面否则in.nextLine();会读入"\n"字符,但"\n" ...

  8. 虚拟机 ----- 最小安装如何安装设置ip ，并启用ifconfig命令

    解决办法: 步骤一:找到网卡 步骤二:修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-eno16777736 步骤三:执行命令 service ne ...

  9. Vue.js-----轻量高效的MVVM框架（五、计算属性）

    #基础例子 <div id="dr01"> <h4>#基础例子</h4> <div> num01={{num01}}, num02= ...

  10. java list分页

    用list分页时会遇到一个问题:用户先选好页码,再传条件查询的时候,会导致查询的那一页有可能什么都没有.这时候我们给他当前查询的最后一页的内容会比较友好. int pageSize; //用户查询的每 ...