CSS揭秘之多重边框的实现

时间：2021-05-08

多重边框的两种实现方案：

  • border-shadow
  • outline
    • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Mutiple border</title></head><body> <style> .common { width: 25vw; height: 20vh; margin: 10%; background: gray; } .box-shadow { box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0px 2px 5px 15px hsla(240, 100%, 50%, .5); } .inner-box-shadow { background: white; box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1); } .outline { border: 2px solid hsla(280, 100%, 50%, 1); outline: 2px dashed hsla(0, 0%, 100%, 1); outline-offset: -15px; border-radius: 10px; outline-width: 2px; } </style> <div class="common box-shadow"></div> <div class="common inner-box-shadow"></div> <div class="common outline"></div></body></html>

    box-shadow

    以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。

    box-shadow:60px -16px teal;box-shadow: 10px 5px 5px black;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);box-shadow: inset 5em 1em gold;box-shadow: 3px 3px red, -1em 0 0.4em olive;box-shadow: inherit;box-shadow: initial;box-shadow: unset;

    指定单个 box-shadow 的用法：

    • 给出两个、三个或四个数字值的情况。
      • 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>。
      • 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
      • 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。
    • 可选， 插页(阴影向内) inset。
    • 可选， 颜色值 <color>。
    • 声明多个shadows时， 用逗号将shadows隔开。

    outline

    CSS的outline属性是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。 多数情况下，简写属性更加可取和便捷。

    轮廓与边框在以下几个方面存在不同：

    • 轮廓不占据空间，它们被描绘于内容之上；
    • 轮廓可以是非矩形的。在Gecko/Firefox中，轮廓是矩形的，但是Opera则会围绕元素结构绘制非矩形的形状；
    outline: 1px solid white;

    outline-offset ：用于设置 outline 与一个元素边缘或边框之间的间隙。

    outline是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

    outline-offset: 3px;outline-offset: 0.2em;outline-offset: inherit;outline-offset: initial;outline-offset: unset;

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章