2、文本样式

逃离我推掉我的手 2022-05-12 15:10 157阅读 0赞

CSS3中新增了text-shadow样式，text-shadow用来设置文本阴影，详解见 [https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow][https_developer.mozilla.org_zh-CN_docs_Web_CSS_text-shadow] 。

以下为利用阴影设置的几种样式  
**1、浮雕文字**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			h1{
    				text-align: center;
    				color: white;
    				font: 200px/300px "微软雅黑";
    				text-shadow: 2px 2px 200px black;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="fd">
    			<h1>上海</h1>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][70]

**2、文字模糊**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			/*transition: 2s表示2s后执行操作*/
    			h1{
    				text-align: center;
    				font-weight: bold;
    				font-size: 100px;
    				color: red;
    				transition: 2s
    			}
    			h1:hover{
    				color: rgba(0, 0, 0, 0);
    				text-shadow: 0 0 100px gray;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>上海</h1>
    	</body>
    </html>

鼠标未放置字体上，显示如下：

![在这里插入图片描述][70 1]  
鼠标放到字体上显示  
![在这里插入图片描述][70 2]  
红线标的地方为样式。

**3、文字阴影**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#sh{
    				width: 300px;
    				height: 300px;
    				font-size: 100px;
    				margin: 50px auto;
    				text-shadow: 10px 10px 10px gray;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="sh">
    			上海
    		</div>
    	</body>
    </html>

![在这里插入图片描述][70 3]

[https_developer.mozilla.org_zh-CN_docs_Web_CSS_text-shadow]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
[70]: /images/20220504/71db022d77874d61924acacbd81c3ffd.png
[70 1]: /images/20220504/ecdec1ecf3b049b78cc0b10cac12f957.png
[70 2]: /images/20220504/2af570192f7a41a59c00d0ec4a1423c7.png
[70 3]: /images/20220504/810913f4be664ad681891e5348255ffa.png