text-shadow之文字特效

text-shadow: h-shadow v-shadow blur color;
/* text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
*  h-shadow	必需。水平阴影的位置。允许负值。	
*  v-shadow	必需。垂直阴影的位置。允许负值。	
*  blur	    可选。模糊的距离。	
*  color	可选。阴影的颜色。参阅 CSS 颜色值。 
*  默认值:	none
*  继承性:	yes
*  版本:	CSS3
*  JavaScript 语法:	object.style.textShadow="2px 2px #ff0000"
*  以数学的直角坐标系为参考,h-shadow的正值就是x轴的正值,但是v-shadow的正值是y轴的负值
*/

火焰文字


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		body{background: #000;}
		
		p{
			text-align: center;
			font: bold 60px helvetica, arial, sans-serif;
			color: red;
			text-shadow: 0 0 4px white,
						0 -5px 4px #ff3,
						2px -10px 6px #fd3,
						-2px -15px 11px #f80,
						2px -25px 18px #f20;
		}
	style>
head>
<body>
	<p>火焰文字:text-shadowp>
body>
html>

text-shadow之文字特效_第1张图片

立体文字


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		body{background: #ccc;}

		p{
			text-align: center;
			font: bold 60px helvetica, arial, sans-serif;
			color: #d1d1d1;
		}

		p:first-child{
			text-shadow: -1px -1px white,
						1px 1px #333;
		}

		p:last-child{
			text-shadow: 1px 1px white,
						-1px -1px #333;
		}
	style>
head>
<body>
	<p>凸起文字:text-shadowp>
	<p>凹下文字:text-shadowp>
body>
html>

text-shadow之文字特效_第2张图片

描边文字


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		body{background: #ccc;}

		p{
			text-align: center;
			font: bold 60px helvetica, arial, sans-serif;
			color: #d1d1d1;
			text-shadow: -1px 0 black,
						0 1px black,
						1px 0 black,
						0 -1px black;
		}
	style>
head>
<body>
	<p>描边文字:text-shadowp>
body>
html>

在这里插入图片描述

外发光文字


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		body{background: #ccc;}

		p{
			text-align: center;
			font: bold 60px helvetica, arial, sans-serif;
			color: #d1d1d1;
			/* 多个相同的阴影列表会让阴影更加明显 */
			text-shadow: 0 0 0.2em #F87,
						0 0 0.2em #F87;
		}
	style>
head>
<body>
	<p>外发光文字:text-shadowp>
body>
html>

在这里插入图片描述

你可能感兴趣的:(css)