W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS3 阴影效果



Norway

Box Shadow

With CSS3 you can create shadow effects!

Hover over me!

CSS3 阴影效果

CSS3 可以给文本和其他元素添加阴影。

在本章中,您将学习以下属性:

  • text-shadow
  • box-shadow

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit- 或 -moz- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性
text-shadow 4.0 12.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
12.0 9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS3 文字阴影

CSS3 text-shadow 属性可以给文本添加阴影。

Text shadow effect!

Example

h1 {
    text-shadow: 2px 2px;
}
尝试一下 »

接下来,给阴影添加一个颜色:

Text shadow effect!

Example

h1 {
    text-shadow: 2px 2px red;
}
尝试一下 »

然后,添加一个影子模糊效果:

Text shadow effect!

Example

h1 {
    text-shadow: 2px 2px 5px red;
}
尝试一下 »

下面的实例显示带有黑色阴影的白色文本:

Text shadow effect!

Example

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
尝试一下 »

下面的例子显示了红色霓虹辉光阴影:

Text shadow effect!

Example

h1 {
    text-shadow: 0 0 3px #FF0000;
}
尝试一下 »

多重阴影

若要为文本添加多个阴影,可以添加逗号分隔的阴影列表。

下面的例子显示了红色和蓝色霓虹辉光阴影:

Text shadow effect!

Example

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
尝试一下 »

下面的例子显示了一个黑色的,蓝色的白色文字,和深蓝色的阴影:

Text shadow effect!

Example

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
尝试一下 »

CSS3 box-shadow 属性

CSS3 box-shadow 属性将应用阴影元素。

在最简单的用法中,只指定水平阴影和垂直阴影:

This is a yellow <div> element with a black box-shadow

Example

div {
    box-shadow: 10px 10px;
}
尝试一下 »

接下来,给阴影添加一个颜色:

This is a yellow <div> element with a grey box-shadow

Example

div {
    box-shadow: 10px 10px grey;
}
尝试一下 »

接下来,添加阴影效果模糊:

This is a yellow <div> element with a blurred, grey box-shadow

Example

div {
    box-shadow: 10px 10px 5px grey;
}
尝试一下 »

你还可以添加阴影在 ::before 和 ::after伪类后,创建一个不错的效果:

Example

#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}
尝试一下 »

卡片

下面是使用 box-shadow 属性创建纸质卡片的实例:

1

January 1, 2016

Norway

Hardanger, Norway

Example

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}
尝试一下 (Text Card) » 尝试一下 (Image Card) »

CSS3 阴影属性

下表列出了CSS3阴影属性:

属性 描述
box-shadow 将一个或多个阴影添加到元素中
text-shadow 将一个或多个阴影添加到文本中