CSS3中box-shadow属性

box-shadow属性是一个CSS3属性，允许我们在险些任何米素上来建立阴影效果，类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面建立出深度（第三维）的错觉。

界说和用法

box-sizing属性界说了若何盘算米素的宽度和高度：它们是否包罗填充和边框。

默认值	content-box
继续	无
动画	有。
CSS版本	CSS3
JavaScript语法	object.style.boxSizing="border-box"

兼容性

了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

基本语法

offset-x: x轴偏移的距离，从左到右

offset-y: y轴偏移的距离，从上到下

blur-radius: 模糊处置的巨细

spread-radius: 扩大区域的巨细

color: 阴影的颜色

inset: 内部阴影 (Semantic-UI的做法，就是用了内部阴影box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset)

例子

同一个米素可以界说多个box-shadow，用逗号离隔

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

思源资源网：分类流动

1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4440

发表于 2021-02-11 16:52
阅读 ( 300 )
分类：互联网