css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊.比如box-shadow:0 0 10px 5px rgba(255,255,255,0.5),0 0 20px 10px rgba(255,255,255,0.5),0 0 30px 15px rgba(255,255,255,0.4),0 0 40px 20px rgba(255,255,255,0.3),0 0 50px 25

来源:学生作业帮助网 编辑:六六作业网 时间:2024/12/20 13:26:41
css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊.比如box-shadow:0010px5pxrgba(255,255,255,0.5),0020px10pxrgba(255,

css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊.比如box-shadow:0 0 10px 5px rgba(255,255,255,0.5),0 0 20px 10px rgba(255,255,255,0.5),0 0 30px 15px rgba(255,255,255,0.4),0 0 40px 20px rgba(255,255,255,0.3),0 0 50px 25
css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊.比如
box-shadow:0 0 10px 5px rgba(255,255,255,0.5),
0 0 20px 10px rgba(255,255,255,0.5),
0 0 30px 15px rgba(255,255,255,0.4),
0 0 40px 20px rgba(255,255,255,0.3),
0 0 50px 25px rgba(255,255,255,0.3),
0 0 60px 30px rgba(255,255,255,0.3),
0 0 70px 35px rgba(255,255,255,0.3);

css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊.比如box-shadow:0 0 10px 5px rgba(255,255,255,0.5),0 0 20px 10px rgba(255,255,255,0.5),0 0 30px 15px rgba(255,255,255,0.4),0 0 40px 20px rgba(255,255,255,0.3),0 0 50px 25
一般写3个像素值 + 一个颜色值 就行
前面第一个是指上下的阴影扩散程度,正值为向下扩散,负值为向上扩散,如果为0代表向上下同时根据第三个值的大小往外扩散.
第二个是指向左右扩散,正值为向右扩散,负值为向左,为0则代表向左右同时.
第三个值简单的理解为扩散的距离
颜色值 是指阴影的颜色,你可以想象阴影的第一个(不透明)的像素颜色就是它,然后逐渐的过度到完全透明.你上面的例子,是指它用的是RGB格式(3个255是白色,但后面的0.3让它变成灰色),也可以用类似 #666666
上面讲到第三个值(像素值)时,只简单的解释为“距离”,没有直接说是指:由“实”到完全透明的距离.就是因为你给出的例子里有“第四个像素值”,这个是指阴影“扩展”.如果你会PS的话,这个很好理解;否则,你看下我下面说的,考考你理解力.
首先,第三个值已经设定阴影的距离,第四个值并不会改变这个距离.因此,它能改变的就是阴影的“透明度”.阴影一般的效果都是由不透明到完全透明,而第四个值就让阴影在设定的距离内(第三个值),阴影不完全透明(即阴影效果为不透明到半透明).
当然第四个值如果设置比第三个值小很多的话,你基本感觉不出变化,设置大点能感觉出来.