模仿地点:https://www.html.cn/tool/css3Preview/Box-Shadow.html
CSS 代码:
/* 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;
取值申明:
inset: 默许暗影在边框外。运用 inset 后,暗影在边框内(即使是通明边框),背景之上内容之下。也有些人喜好把这个值放在末了,浏览器也支撑。
<offset-x> <offset-y>: 这是头两个 <length>值,用来设置暗影偏移量。<offset-x> 设置程度偏移量,假如是负值则暗影位于元素左侧。 <offset-y> 设置垂直偏移量,假如是负值则暗影位于元素上面。可用单元请检察 <length>。假如二者都是0,那末暗影位于元素背面。这时候假如设置了 <blur-radius> 或 <spread-radius> 则有隐约结果。
<blur-radius>: 这是第三个 <length> 值。值越大,隐约面积越大,暗影就越大越淡。 不能为负值。默许为0,此时暗影边沿锋利。
<spread-radius> : 这是第四个 <length> 值。取正值时,暗影扩展;取负值时,暗影压缩。默许为0,此时暗影与元素一样大。
<color> : 相干事项检察 <color> 。假如没有指定,则由浏览器决议——通常是color的值,不过现在Safari取通明。
以上就是css 内暗影怎样做的细致内容,更多请关注ki4网别的相干文章!