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. P4094 [HEOI2016/TJOI2016]字符串 后缀数组+主席树+二分答案

    $ \color{#0066ff}{ 题目描述 }$ 佳媛姐姐过生日的时候,她的小伙伴从某东上买了一个生日礼物.生日礼物放在一个神奇的箱子中.箱子外边写了一个长为n的字符串s,和m个问题.佳媛姐姐必须 ...

  2. 拓扑排序/DP【洛谷P2883】 [USACO07MAR]牛交通Cow Traffic

    P2883 [USACO07MAR]牛交通Cow Traffic 随着牛的数量增加,农场的道路的拥挤现象十分严重,特别是在每天晚上的挤奶时间.为了解决这个问题,FJ决定研究这个问题,以能找到导致拥堵现 ...

  3. MVC与三层的区别

    闲来无事,想了想MVC与三层的区别,根据自己的经验,上图 由此来看,其实这两种框架(结构)的分层方式其实没什么联系,也没有什么可比性,但他们的目的都一样的:解耦 --Ones

  4. JavaScript小技巧随笔

    1. 在用||做条件判断时,如果情况较多,我们可以考虑是否能够用Array.includes()方法代替 var conditionArray = [ test1, test2, test3 ]; i ...

  5. Arch下systemd无法开机执行rc.local之解决方法

    早就发现了,Arch的systemd提供的那个 rc-local.service 貌似有问题,rc.local不会执行.因为没用rc.local,一直没管. 解决方法源自这里,需要稍加改动: http ...

  6. HashMap 1.8的源码分析一

    public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, ...

  7. Unity 动画系统 Animation和Animator等常用类

  8. Liunx 发送邮件

    可以使用rpm -qa | grep mailx查看系统自带的mailx版本. 使用wget http://sourceforge.net/projects/heirloom/files/latest ...

  9. MS SqlServer 随机查询并随机排序

    MS SqlServer : select top N * from Table1 order by NewId() mySql: SELECT * FROM tableName ORDER BY r ...

  10. buildKibanaServerUrl

    private String buildKibanaServerUrl(DiscountIndexMailData mailData,Statistic stat,String failureCaus ...