CSS揭秘之多重边框的实现_CSS教程_CSS_网页制作_

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

1. border-shadow
2. outline

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; 

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！