如何使用css3给文字添加阴影效果

发布时间:2021-08-04 16:06:26 作者:chen
来源:亿速云 阅读:180

本篇内容主要讲解“如何使用css3给文字添加阴影效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用css3给文字添加阴影效果”吧!


用css3给文字添加阴影效果代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字阴影</title> 
<style>
h2
{text-shadow: 7px 10px 6px #FF0145;}
p
{text-shadow: 5px 5px 5px #FF0000;}
p1
{text-shadow: 5px 5px 5px #FF4780;}
</style>
</head>
<body>

<h2>亿速云</h2>
<p>亿速云</p>
<p1>文字阴影</p1>
	

</body>
</html>

代码运行效果图

如何使用css3给文字添加阴影效果

文字是没有阴影效果的时候用<style>里面写法输入代码如下:

如何使用css3给文字添加阴影效果

基本写法代码示例

<style>
p{text-shadow: 5px 5px 5px #FF0000;}
</style>

<p>亿速云</p>

代码运行效果图

如何使用css3给文字添加阴影效果

text-shadow的语法

如何使用css3给文字添加阴影效果

横向偏移:指文字阴影相对文字本身的位置偏移多少。零为不偏移,与文字位置重合;正数为向右偏移;负数为向左偏移。

纵向偏移:与横向偏移类似,只不过方向为纵向,即上下偏移。

羽化半径:羽化半径越小,则阴影就越锐利;羽化半径越大,则阴影就越朦胧。

阴影颜色:指定阴影的颜色,可以是任何颜色。一般用较深的颜色创造阴影效果,用较浅的颜色创造发光效果。

到此,相信大家对“如何使用css3给文字添加阴影效果”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 使用css3实现文字单阴影效果和多重阴影效果的方法
  2. css3怎么添加文字阴影效果及如何在text-shadow中添加

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css css3

上一篇:sqlserver 2000中怎么创建用户

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》