CSS揭秘之多重边框

liuyix 发布于2019-08-30 11:08 / 2621人阅读

摘要：多重边框的两种实现方案以由逗号分隔的列表来描述一个或多个阴影效果。轮廓与边框在以下几个方面存在不同轮廓不占据空间，它们被描绘于内容之上轮廓可以是非矩形的。是元素的轮廓，悬浮在元素边框之上。也就是说，它们之间的颜色会继承父元素的背景色。

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

border-shadow

outline





    
    
    
    Mutiple border

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轴上的偏移量和y轴上的偏移量。

如果给出了第三个值, 这第三个值将被解释为模糊半径的大小。

如果给出了第四个值, 这第四个值将被解释为扩展半径的大小。

可选，插页(阴影向内) inset。

可选，颜色值。

声明多个shadows时，用逗号将shadows隔开。

outline

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

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

轮廓不占据空间，它们被描绘于内容之上；

轮廓可以是非矩形的。在Gecko/Firefox中，轮廓是矩形的，但是Opera则会围绕元素结构绘制非矩形的形状；

/* 宽度 | 样式 | 颜色 */
outline: 1px solid white;

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

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

/*  values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

混合云云服务器大揭秘揭秘云存储云计算揭秘人工智能揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114793.html

CSS揭秘之《多重边框》

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却 1、box-shadow还接受第四个参数（称作扩张半径），通过指定正值或负值，可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过b...

sixgo 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《多重边框》

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却 1、box-shadow还接受第四个参数（称作扩张半径），通过指定正值或负值，可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过b...

XboxYan 2019-08-05 11:58 评论0 收藏0
CSS揭秘之《多重边框》

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却 1、box-shadow还接受第四个参数（称作扩张半径），通过指定正值或负值，可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过b...

codeGoogle 2019-08-29 13:20 评论0 收藏0
《CSS揭秘》-背景与边框

摘要：给一个容器设置一层白色背景和一道半透明白色边框。思路实际是设置的背景会延伸到边框所在的区域的下层，可以通过属性调整背景的默认行为。优点边框样式十分灵活。缺点只适用于双层边框的场景边框不一定会贴合属性产生的圆角。 1.给一个容器设置一层白色背景和一道半透明白色边框。思路：实际是设置的背景会延伸到边框所在的区域的下层，可以通过background-clip属性调整背景的默认行为。 bac...

tangr206 2019-08-30 15:55 评论0 收藏0
《CSS揭秘》：平行四边形

摘要：在视觉设计中，平行四边形往往可以传达出一种动感。问题使用来创建平行四边形。将所有样式应用到伪元素上，然后对伪元素进行变形。为了使伪元素保持良好的灵活性，可以自动继承主元素的属性。在视觉设计中，平行四边形往往可以传达出一种动感。问题使用CSS来创建平行四边形。可以使用transform: skewX(-45deg) showImg(https://segmentfault.com/...

yuxue 2019-08-29 11:19 评论0 收藏0