手把手教你使用css3给文字添加阴影效果（代码详解）
之前的文章《CSS篇：如何将页面背景设置渐变效果（代码详解）》中，给大家介绍了怎样使用css设置背景色渐变。下面本篇文章给大家介绍怎样使用css3给文字添加阴影效果呢，我们一起看看怎么做。
用css3给文字添加阴影效果代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影</title>
<style>
h1
{text-shadow: 7px 10px 6px #FF0145;}
p
{text-shadow: 5px 5px 5px #FF0000;}
p1
{text-shadow: 5px 5px 5px #FF4780;}
</style>
</head>
<body>
<h1>php中文网</h1>
<p>php中文网</p>
<p1>文字阴影</p1>
</body>
</html>
代码运行效果图
文字是没有阴影效果的时候用<style>里面写法输入代码如下：
基本写法代码示例
<style>
p{text-shadow: 5px 5px 5px #FF0000;}
</style>
<p>php中文网</p>
代码运行效果图
text-shadow的语法
横向偏移：指文字阴影相对文字本身的位置偏移多少。零为不偏移，与文字位置重合；正数为向右偏移；负数为向左偏移。
纵向偏移：与横向偏移类似，只不过方向为纵向，即上下偏移。
羽化半径：羽化半径越小，则阴影就越锐利;羽化半径越大，则阴影就越朦胧。
阴影颜色：指定阴影的颜色，可以是任何颜色。一般用较深的颜色创造阴影效果，用较浅的颜色创造发光效果。
以上就是手把手教你使用css3给文字添加阴影效果（代码详解）的详细内容！
相关内容
-
使用CSS实现的几种进度条
（学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...
-
聊聊你可能不了解的CSS属性函数 attr()
本篇文章带大家了解一下CSS属性函数attr()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。属性函数attr()用于获取HTML元素里面的属性值,并用于样...
-
详解CSS3+SVG滤镜实现不规则边框的方法
本篇文章将介绍一种配合SVG滤镜实现各种不规则图形添加边框的小技巧。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。需求背景，给不规则图形添加边框在我们日常开发...
-
你值得了解的一种CSS获取图片主题色的小技巧（分享）
本篇文章给大家分享一种利用CSS获取图片主题色的小技巧。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。背景起因是微信技术群里有个同学发问，有什么方法能够获取图...
-
css3跟css区别是什么
css3跟css区别是：1、CSS3是CSS技术的升级版本，CSS是用来表现HTML或XML等文件样式的计算机语言；2、CSS3主要包括盒子模型、列表模块等模块，CSS可以静态...
-
一招搞定css不规则边框
大家可能都习惯了使用box-shadow来设置盒阴影，但顾名思义，盒阴影一般阴影的投影是一个方形，如果我们遇到其他情况，想要做阴影效果应该怎么实现呢？之前做过很多特殊的布局，比...
-
一招教你使用css3制作按钮添加动态效果（代码分享）
之前的文章《新手篇：如何用ccs制作一个简单的布局（附代码）》中，给大家介绍了如何用ccs制作一个简单的布局。下面本篇文章给大家介绍怎么使用css3制作按钮添加动态效果，我们一...
-
19个CSS唯美的边框，让你的项目大放异彩！
本篇文章分享19个CSS唯美的边框，可增加我们的项目"亮"点，让你的项目大放异彩，让用户爱起来！希望对大家有所帮助，快来收藏吧！！渐变边框动画事例地址：ht...
-
快看！10个不错的CSS实用小技巧（分享）
本篇文章给大家分享10个不错的CSS实用小技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！CSS大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的...
-
为什么grid-gap会导致溢出？
您有一个3列网格容器(.body):grid-template-columns:25%50%25%这些列的总宽度为100%。然后在列（和行）之间添加沟槽：grid-gap:10...