CSS3提供了多种方法来实现阴影效果,包括文本阴影和盒子阴影。接下来,我将详细介绍CSS3阴影的各种属性和用法,并列举一些实例来帮助理解。

1. text-shadow属性:

text-shadow属性可以在文本周围创建一个阴影效果。该属性有四个值,分别表示水平偏移量、垂直偏移量、模糊程度和颜色。

示例代码:

```

h1 {

text-shadow: 2px 2px 4px #000000;

}

```

上述代码将给h1元素的文本添加一个右下角偏移为2px的阴影效果,并且模糊程度为4px,颜色为黑色。

2. box-shadow属性:

box-shadow属性可以在盒子周围创建一个阴影效果。该属性也有四个值,分别表示水平偏移量、垂直偏移量、模糊程度和颜色。

示例代码:

```

p {

box-shadow: 3px 3px 8px #888888;

}

```

上述代码将给一个p元素添加一个右下角偏移为3px的阴影效果,并且模糊程度为8px,颜色为灰色。

3. 多个阴影效果:

CSS3还支持在一个元素中同时添加多个阴影效果,使用逗号分隔。

示例代码:

```

h2 {

text-shadow: 2px 2px 4px #000000

-2px -2px 4px #ffffff;

}

```

上述代码将给h2元素的文本添加两个阴影效果,一个是黑色的右下角偏移2px的阴影,另一个是白色的左上角偏移2px的阴影。

4. inset属性:

box-shadow属性默认是在元素外部创建阴影效果,如果我们想要在元素内部创建阴影效果,可以使用inset关键字。

示例代码:

```

p {

box-shadow: inset 0 0 5px 5px #888888;

}

```

上述代码将给一个p元素内部添加一个颜色为灰色、偏移量为0的阴影效果,模糊程度为5px。

5. 多层叠加阴影:

我们可以通过添加多个box-shadow或text-shadow属性来叠加多层阴影效果。

示例代码:

```

h3 {

text-shadow: 2px 2px 4px #000000

-2px -2px 4px #ffffff;

box-shadow: 3px 3px 8px #888888

-3px -3px 8px #ffffff;

}

```

上述代码将给h3元素的文本添加两个阴影效果,一个是黑色的右下角偏移2px的阴影,另一个是白色的左上角偏移2px的阴影。同时,该元素的盒子也添加了两个阴影效果。

6. 不透明度和阴影:

box-shadow和text-shadow属性也支持使用rgba颜色值来实现不透明度效果。

示例代码:

```

h4 {

text-shadow: 2px 2px 4px rgba(0

0

0

0.5);

box-shadow: 3px 3px 8px rgba(136

136

136

0.5);

}

```

上述代码将给h4元素的文本添加一个右下角偏移为2px的阴影效果,并且模糊程度为4px,颜色为半透明黑色。同时,该元素的盒子也添加了一个右下角偏移为3px的阴影效果,并且模糊程度为8px,颜色为半透明灰色。

相关文章