简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

CSS3的text-shadow字体阴影怎么使用

php中世界最好的语言
发布： 2017-11-24 09:27:30
原创
2171 人浏览过

CSS3的text-shadow样式是设置文阴影效果，原本在CSS2中就有这个属性，在CSS3中的文字阴影再次贝应用，那么我们就来看一下需要如何使用text-shadow。

CSS3单词：

text-shadow

语法结构

div{text-shadow:5px 2px 6px #000;} 

设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果，同时阴影大小范围为6px，阴影颜色为黑色（#000）。

文字显示阴影效果共4个值，第一个代表距离左多少距离开始显示阴影效果，第二个值代表距离上多少距离开始显示阴影效果，第三个值代表阴影范围大小，第四个值为阴影效果颜色。

案例HTML代码

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字体阴影 在线演示</title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>我阴影文字</div> 
<div class="txt">文字阴影测试内容1</div> 
<div class="txt2">文字阴影测试内容2</div> 
</body> 
</html>
登录后复制

对应CSS代码：

.txt {text-shadow:5px 1px 6px #F93 }  
.txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}
登录后复制

以上就是CSS3的text-shadow使用方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

怎样隐藏溢出DIV的内容

CSS布局有哪些技巧

CSS里字体样式怎么设置

以上是CSS3的text-shadow字体阴影怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css3 text-shadow
来源：php.cn
上一篇：CSS3的box-shadow怎么使用 下一篇：属性选择器和伪类选择器的使用方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
MySQL：'从......中选择文本作为<此处变量或子查询>” 我有下表，其中包含以下数据：id文本语言1德语文本德语2英文文本英语我想要的是获得以下格式的结果：german="deutschertext"english=&...
来自于 2024-04-06 19:25:54
0
2
529
无法从网站获取输入元素 所以我试图从Twitter获取一个输入元素，但当我运行它时，它不断在节点终端中给我一个这样的错误，结果，由此代码创建的浏览器窗口将自行关闭，因为它找不到正确的输入选择器。如何获取正...
来自于 2024-04-06 18:59:57
0
1
442
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
将工具提示与相对父级对齐 我花了两天时间试图解决这个问题，但我意识到我无法独自完成。我试图将我的工具提示相对于父级居中。这是我的代码=>letcollection=document.querySele...
来自于 2024-04-06 13:16:59
0
2
394
在块换行符后显示一个元素 我目前有这个：我想将图标div放在文本末尾，但因为它是一个“块”，所以我无法使其工作。想要的输出：代码片段：*{font-family:Arial,'sans-serif'}.te...
来自于 2024-04-04 21:45:21
0
1
271
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！