CSS3 阴影效果 | 您所在的位置:网站首页 › 字体颜色阴影边框 › CSS3 阴影效果 |
❮ 上一节
下一节 ❯
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 实验室设备网 版权所有 |