CSS揭秘之多重边框的实现

  发布时间:2019-06-10 16:15:43   作者:胡斐   我要评论

这篇文章主要介绍了CSS揭秘之多重边框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

  1. border-shadow
  2. 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 规则相同(第一个阴影在最上面)。

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow:60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
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是元素的轮廓,悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说,它们之间的颜色会继承父元素的背景色。

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 单元素利用css实现多重边框效果示例代码

    边框操作是每位前端工程师们经常会遇到的,下面这篇文章主要给大家介绍了关于单元素如何利用css实现多重边框效果的相关资料,文中通过示例代码给大家详细介绍了实现的过程
    2017-09-18
  • CSS3实现多重边框的方法总结

    CSS3的box-shadow用来制作多重边框真的比较给力,这也是本文CSS3实现多重边框的方法总结的重点,不过在此之前我们还是先来看一下兼容性较好的传统方式:
    2016-05-31
  • css2.1多重背景和边框效果实现原理及代码(图文介绍)

    在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪元素及其定位属性的所有浏览器,需要的朋
    2012-12-24

最新评论