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. Django 实现的分页类

    后台实现的一个分页类: from django.utils.safestring import mark_safe class Page: def __init__(self, current_pag ...

  2. 2019.2.25考试T1， 矩阵快速幂加速递推+单位根反演（容斥）

    \(\color{#0066ff}{题解}\) 然后a,b,c通过矩阵加速即可 为什么1出现偶数次3没出现的贡献是上面画绿线的部分呢? 考虑暴力统计这部分贡献,答案为\(\begin{aligned} ...

  3. PHP中SESSION无法获取问题

    近期在看公司老项目,前台可以正常访问,但是后台却无法登录,一直报请求超时,请重新登录!进入服务后发现是有一处SESSION的值无法获取,这就让人很郁闷了,通常SESSION无法使用都是因为没有使用se ...

  4. 封装下Excel导出

    1. 使用方法 1.1 对象使用注解 @ExcelColumn(name = "页面1",freeze = "0,1,1,2",autoWidth=true) ...

  5. ubuntu开机自启动服务管理

    安装sysv-rc-conf sudo apt-get install sysv-rc-conf 执行下面,查看服务情况 sudo sysv-rc-conf 启动服务有以下两种方式 update-rc ...

  6. Margarite and the best present

    Little girl Margarita is a big fan of competitive programming. She especially loves problems about a ...

  7. Nginx静态服务，域名解析

    安装这里就不写了在LNMP里有具体的安装 1.1 常用来提供静态Web服务的软件有如下三种:     Apache:这是中小型Web服务的主流,Web服务器中的老大哥.     Nginx:大型网 ...

  8. 修改jupyter notebook的默认浏览器

    1.打开命令行 2.输入jupyter notebook --generate-config 3.显示出jupyter_notebook_config.py 文件所在的目录.按文件目录找到这个文件. ...

  9. JS数组去重总结

    方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 Array.prototype.distinct = function(){ var arr = th ...

  10. silverlight vs2010 需要缺少的web组件才能加载

    在打开一个开源的Silverlight项目是遇到如图所示的问题,点击是后没有反应. 查了资料,需要安装微软的webpi(Microsoft Web Platform Installer) webpi的 ...