旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css 内暗影怎么做【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:81


导读:CSS3box-shadow属性用来形貌一个元素的一个或多个暗影结果,该属性险些能够让你完成你想要的任何暗影结果。但是box-shadow属性语法和取值异常天真,关于新手有...
CSS3 box-shadow 属性用来形貌一个元素的一个或多个暗影结果,该属性险些能够让你完成你想要的任何暗影结果。但是 box-shadow 属性语法和取值异常天真,关于新手有点不容易明白。

模仿地点: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网别的相干文章!

标签:css