css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊。比如

html-css035

css中,box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊。比如,第1张

一般写3个像素值

+

一个颜色值

就行

前面第一个是指上下的阴影扩散程度,正值为向下扩散,负值为向上扩散,如果为0代表向上下同时根据第三个值的大小往外扩散。

第二个是指向左右扩散,正值为向右扩散,负值为向左,为0则代表向左右同时。

第三个值简单的理解为扩散的距离

颜色值

是指阴影的颜色,你可以想象阴影的第一个(不透明)的像素颜色就是它,然后逐渐的过度到完全透明。你上面的例子,是指它用的是RGB格式(3个255是白色,但后面的0.3让它变成灰色),也可以用类似

#666666

上面讲到第三个值(像素值)时,只简单的解释为“距离”,没有直接说是指:由“实”到完全透明的距离。就是因为你给出的例子里有“第四个像素值”,这个是指阴影“扩展”。如果你会PS的话,这个很好理解;否则,你看下我下面说的,考考你理解力。

首先,第三个值已经设定阴影的距离,第四个值并不会改变这个距离。因此,它能改变的就是阴影的“透明度”。阴影一般的效果都是由不透明到完全透明,而第四个值就让阴影在设定的距离内(第三个值),阴影不完全透明(即阴影效果为不透明到半透明)。

当然第四个值如果设置比第三个值小很多的话,你基本感觉不出变化,设置大点能感觉出来。

<head>

<meta http-equiv="page-Exit" content="revealTrans(Duration=3.0,Transition=23)">

<meta http-equiv="page-Enter" content="revealTrans(Duration=3.0,Transition=23)">

<title></title>

</head>

其中的中间两句就起到动态的效果作用,Transition 滤镜类型。表示使用哪种特效,取值为0-23。

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种