整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

手把手教你使用CSS3为文本和元素实现添加阴影效果

用CSS3，你可以为文本和元素添加阴影。

一、浏览器支持

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

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性

Chrome

Firefox

Safari

Opera

IE

text-shadow

4.0

10.0

3.5

4.0

9.5

box-shadow

10.0 4.0 -webkit-

9.0

4.0 3.5 -moz-

5.1 3.1 -webkit-

10.5

二、CSS3 阴影的文字特效

CSS代码：

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>
  <h1>文本阴影效果!</h1>


  <p><b>注意:</b> IE9和更早的版本, 不支持text-shadow属性.</p>
</body>
</CSS>

CSS3 文本阴影

CSS3 text-shadow 属性应用阴影到文本上.

在简单的用法, 你可以在水平方向设置阴影(2px)和垂直方向设置阴影(2px):

h1 {
    text-shadow: 2px 2px;
}

添加一个颜色到阴影:

h1 {
    text-shadow: 2px 2px red;
}

显示一个带有黑色阴影的白色文本:

 h1 {
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }

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

  h1 {
        text-shadow: 0 0 3px #FF0000;
    }

多重阴影

要在文本中添加多个阴影，可以添加逗号分隔的阴影列表。

下面的实例显示了一个红色和蓝色的霓虹灯阴影:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #F00000;
}

下面实例显示了一个白色文本带有黑色，蓝色和深蓝色阴影：

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

三、box-shadow 属性

CSS3 box-shadow 属性应用阴影到元素上.

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

一个黄色的 <div> 元素使用一个黑色box-shadow

   div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px;
    }

下一步，添加一个颜色到阴影,对阴影添加模糊效果:

一个黄色的 <div>元素带模糊红/灰 box-shadow。

 div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px 5px grey;
    }

案例

添加阴影到 ::before 和 ::after 伪类中, 来创建一个有趣的效果。

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #boxshadow {
      position: relative;
      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      padding: 10px;
      background: white;
  }


  /* Make the image fit the box */
  #boxshadow img {
      width: 100%;
      border: 1px solid #8a4419;
      border-style: inset;
  }


  #boxshadow::after {
      content: '';
      position: absolute;
      z-index: -1; /* hide shadow behind image */
      -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      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;CSS
  }
</style>
</head>
<body>
  <div id="boxshadow">
    <img src="img/fy_indexBg.jpg" alt="Norway" width="600" height="400">
  </div>
</body>
</CSS>

四、总结

本文基于CSS基础，使用CSS语言。介绍了有关CSS阴影效果的应用，从基础的文本阴影入手， 对CSS常见的阴影表示效果都做了一一的讲解。通过一个个实例的演示，实例运行的效果图。希望能够帮助你更好的学习CSS。

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

用CSS3，你可以为文本和元素添加阴影。

一、浏览器支持

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

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性ChromeFirefoxSafariOperaIE
text-shadow4.010.03.54.09.5
box-shadow10.0 4.0 -webkit-9.04.0 3.5 -moz-5.1 3.1 -webkit-10.5

二、CSS3 阴影的文字特效

CSS代码：

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>
  <h1>文本阴影效果!</h1>

  <p><b>注意:</b> IE9和更早的版本, 不支持text-shadow属性.</p>
</body>
</CSS>

CSS3 文本阴影

CSS3 text-shadow 属性应用阴影到文本上.

在简单的用法, 你可以在水平方向设置阴影(2px)和垂直方向设置阴影(2px):

h1 {
    text-shadow: 2px 2px;
}

添加一个颜色到阴影:

h1 {
    text-shadow: 2px 2px red;
}

显示一个带有黑色阴影的白色文本:

h1 {
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }

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

 h1 {
        text-shadow: 0 0 3px #FF0000;
    }

多重阴影

要在文本中添加多个阴影，可以添加逗号分隔的阴影列表。

下面的实例显示了一个红色和蓝色的霓虹灯阴影:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #F00000;
}

下面实例显示了一个白色文本带有黑色，蓝色和深蓝色阴影：

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

三、box-shadow 属性

CSS3 box-shadow 属性应用阴影到元素上.

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

一个黄色的

元素使用一个黑色box-shadow
div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px;
    }

下一步，添加一个颜色到阴影,对阴影添加模糊效果:

一个黄色的

元素带模糊红/灰 box-shadow。
div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px 5px grey;
    }

案例

添加阴影到 ::before 和 ::after 伪类中, 来创建一个有趣的效果。

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #boxshadow {
      position: relative;
      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      padding: 10px;
      background: white;
  }

  /* Make the image fit the box */
  #boxshadow img {
      width: 100%;
      border: 1px solid #8a4419;
      border-style: inset;
  }

  #boxshadow::after {
      content: '';
      position: absolute;
      z-index: -1; /* hide shadow behind image */
      -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      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;CSS
  }
</style>
</head>
<body>
  <div id="boxshadow">
    <img src="img/fy_indexBg.jpg" alt="Norway" width="600" height="400">
  </div>
</body>
</CSS>

四、总结

本文基于CSS基础，使用CSS语言。介绍了有关CSS阴影效果的应用，从基础的文本阴影入手， 对CSS常见的阴影表示效果都做了一一的讲解。通过一个个实例的演示，实例运行的效果图。希望能够帮助你更好的学习CSS。

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

天我发了几篇关于CSS文字效果的文章，接下来给大家介绍一下如何使用CSS完成文本阴影效果。

该 text-shadow 属性可用于为您的文本提供美丽的阴影效果。使用此属性，可以为HTML元素的文本提供不同类型的阴影效果。

您可以为此属性的四个参数赋予值，如下所示。

CSS

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

值

这些参数定义如下。

  1. 水平偏移（必需）： 这是阴影与文本的水平距离。正水平偏移将阴影置于文本的右侧，而负水平偏移将阴影置于文本的左侧。
  2. 垂直偏移（必需）： 这是文本上方或下方阴影的垂直距离。正垂直偏移将阴影置于文本的底部，而负垂直偏移将阴影置于文本的顶部。
  3. 模糊半径（可选）： 给予模糊半径使阴影模糊。较高的模糊半径值将使阴影更加模糊和扩展，从而使其更大更轻。另一方面，较小的模糊半径值将导致更清晰，更亮和更少扩展的阴影。不允许使用负值。
  4. color（可选）： 指定阴影的颜色。

让我们通过一个例子来理解这一点。以下代码将更改文本的字体大小和颜色。

HTML

<p>Text Shadow</p>

CSS

p {
 font-family: 'Muli', sans-serif;
 font-size: 47px;
 font-weight: 900;
 color: #CFC547;
}

现在，考虑到上述每个参数的影响，让我们为这个文本画一个阴影。

水平偏移

如果只想在文本的左侧或右侧使用阴影，则给出垂直偏移0的值。

要将阴影置于文本的右侧，请给出正的水平偏移值。

CSS

.text {
	text-shadow: 3px 0 rgba(81,67,21,0.8);
}

负值会将阴影置于框的左侧。

CSS

.text {
	text-shadow: -3px 0 rgba(81,67,21,0.8);
}

在上面的代码中， rgba（81,67,21,0.8） 是阴影的颜色。如果没有给出阴影颜色，则文本阴影的颜色将与文本的颜色相同。

垂直偏移

与上面的情况相同，如果您希望阴影仅位于文本的顶部或底部，请给出0水平偏移。

正垂直偏移值将阴影置于文本的底部。

CSS

.text {
	text-shadow: 0 4px rgba(81,67,21,0.8);
}

负值会将阴影置于文本的上方。

CSS

.text {
	text-shadow: 0 -4px rgba(81,67,21,0.8);
}

如果你想要一个右下角的阴影，那么给出水平偏移和垂直偏移都是正的。

CSS

.text {
	text-shadow: 3px 4px rgba(81,67,21,0.8);
}

模糊半径

模糊使阴影看起来真实。要为阴影提供模糊效果，请给它一些正方形模糊半径。

CSS

.text {
	text-shadow: 3px 4px 7px rgba(81,67,21,0.8);
}

颜色

您可以通过提供任何颜色名称或颜色值（如rgba或hsla）为阴影指定颜色。如果将不透明度设置为小于1的值（如上面的情况，不透明度设置为0.8），它会为阴影提供漂亮且更自然的外观。

给多个阴影

您还可以为某些文本提供多个阴影，以提供不同的阴影效果。这些值以逗号分隔给 text-shadow属性。

例如，请考虑以下代码。

CSS

.text {
 text-shadow: 3px 0px 7px rgba(81,67,21,0.8), -3px 0px 7px rgba(81,67,21,0.8);
}

这里，为text-shadow 属性提供了两个阴影值 ，以逗号分隔。第一个值将在文本的右侧绘制阴影，而第二个值将在文本的左侧绘制阴影。

考虑一些给出多个阴影的例子。

整理不易，请大家多多关注支持我，谢谢！


在线咨询
上一篇：如何用 JavaScript 模拟点击事件，简单实现 x, y 坐标点击？
下一篇：网页制作之css行内、块元素相互转化

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 泉州 婺城区 长顺县 藤县 九原区 招远 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服