CSSbox-shadow属性
box-shadow 属性⽤于在元素的框架上添加阴影效果。你可以在同⼀个元素上设置多个阴影效果,并⽤逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜⾊。
你⼏乎可以在任何元素上使⽤box-shadow来添加阴影效果。如果元素同时设置了 属性 ,那么阴影也会有圆⾓效果。多个阴影在z轴上的顺序和多个 规则相同(第⼀个阴影在最上⾯)。
是⼀个允许你⽣成 box-shadow 的交互式⼯具。
/* 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怎么设置box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
向元素添加单个 box-shadow 效果时使⽤以下规则:
当给出两个、三个或四个 值时。
如果只给出两个值, 那么这两个值将会被当作 来解释。
如果给出了第三个值, 那么第三个值将会被当作解释。
如果给出了第四个值, 那么第四个值将会被当作来解释。
可选,关键字。
可选,值。
若要对同⼀个元素添加多个阴影效果,请使⽤逗号将每个阴影规则分隔开。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论