网页制作

CSS揭秘之多重边框的实现
网页制作 2024/11/15 佚名
3 2

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

  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,多重边框
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“CSS揭秘之多重边框的实现”

暂无“CSS揭秘之多重边框的实现”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com