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

来源：懂视网责编：小采时间：2020-11-27 18:49:54

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

CSS3的text-shadow字体阴影怎么使用:CSS3的text-shadow样式是设置文阴影效果，原本在CSS2中就有这个属性，在CSS3中的文字阴影再次贝应用，那么我们就来看一下需要如何使用text-shadow。CSS3单词：text-shadow语法结构div{text-shadow:5px 2px 6px #000;} 设置div盒子

推荐度：

点击下载本文 文档为doc格式

导读CSS3的text-shadow字体阴影怎么使用:CSS3的text-shadow样式是设置文阴影效果，原本在CSS2中就有这个属性，在CSS3中的文字阴影再次贝应用，那么我们就来看一下需要如何使用text-shadow。CSS3单词：text-shadow语法结构div{text-shadow:5px 2px 6px #000;} 设置div盒子

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字体阴影怎么使用

推荐度：

点击下载本文 文档为doc格式

标签：使用的使用文字字体

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐