CSS3 阴影效果 您所在的位置:网站首页 字体颜色阴影边框 CSS3 阴影效果

CSS3 阴影效果

#CSS3 阴影效果| 来源: 网络整理| 查看: 265

❮ 上一节 下一节 ❯ CSS3 阴影效果

Shadows

用 CSS 创建阴影效果!

在我上面悬停! CSS3 阴影效果

通过使用 CSS,您可以在文本和元素上添加阴影。

在我们的教程中,您将学习如下属性:

text-shadow box-shadow CSS3 文字阴影

CSS text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影(2px)和垂直阴影(2px):

文字阴影效果! 实例 h1 {   text-shadow: 2px 2px; } 亲自试一试 »

接下来,为阴影添加颜色:

文字阴影效果! 实例 h1 {   text-shadow: 2px 2px red; } 亲自试一试 »

然后,向阴影添加模糊效果:

文字阴影效果! 实例 h1 {   text-shadow: 2px 2px 5px 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 #0000FF; } 亲自试一试 »

下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本:

文字阴影效果! 实例 h1 {  color: white;   text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;} 亲自试一试 »

您还可以使用 text-shadow 属性在文本周围创建纯边框(无阴影):

包围文本的边框! 实例 h1 {  color: yellow;  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;} 亲自试一试 » ❮ 上一节 下一节 ❯


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有