CSS3 text-shadow给文本设置阴影属性笔记

原创 国哥笔记  2018-09-16 21:38  阅读 903 views 次

text-shadow属性定义及用法

css3中,text-shadow属性是用来为文本设置阴影,它可以为文本设置一个或多个阴影;text-shadow属性后边跟多个属性值,属性值与属性值之间是以空格分隔的(如:text-shadow: 5px 5px 5px #FF0000;),前两个或前三个表示长度值(省略的长度默认为),最后一个表示颜色(可选)。

text-shadow属性语法格式

css语法:text-shadow: h-shadow v-shadow blur color;

JavaScript语法:object.style.textShadow="h-shadow v-shadow blur color"

text-shadow属性值参数说明

  • h-shadow :水平阴影的位置,可以为负值。
  • v-shadow :垂直阴影的位置,可以为负值。
  • Blur:模糊的距离(可选)。
  • Color:阴影的颜色(可选)。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 text-shadow给文本设置阴影属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:18px ;}
#a{text-shadow:1px 3px #FF9999;}
#b{text-shadow:4px 6px #777;}
#c{text-shadow:6px 8px #FFcccc;}
#d{text-shadow:8px 10px #FF0000;}
</style>
</head>
<body>
<div>文本不添加text-shadow属性</div>
<div id = "a">text-shadow:1px 3px #FF9999;效果</div>
<div id = "b">text-shadow:4px 6px #777;效果</div>
<div id = "c">text-shadow:6px 8px #FFcccc;效果</div>
<div id = "d">text-shadow:8px 10px #FF0000;效果</div>
</body>
</html>

运行结果: CSS3 text-shadow给文本设置阴影属性笔记

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-shadow.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情