CSS3盒子文本阴影

最新推荐文章于 2024-08-31 09:24:27 发布

Stirve unremitting

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量109

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104976953

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.box{
				height:100px;
				margin: 100px auto;
				font-size: 80px;
				
				text-shadow:4px -4px 10px red,
							6px -7px 10px yellow,
							8px -9px 10px purple;
				
			}
			
			.box2{
				width: 200px;
				height: 300px;
				background: pink;
				margin: 100px auto;
				word-wrap:normal;
				word-wrap: break-word;
			}
			
			.box3{
				width: 200px;
				height: 300px;
				background: pink;
				margin: 100px auto;
				word-break: break-all;
				word-break: keep-all;
			}
			/*内部阴影*/
			.box5{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 100px auto;
				box-shadow:10px 10px 10px 10px red inset;
			}
			/*外部阴影*/
			.box4{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 100px auto;
				box-shadow:10px 10px 10px 10px red,15px 15px 15px 10px yellow,20px 20px 20px 15px skyblue;
			}
			
		</style>
	</head>
	<body>
		<!--
			文本阴影:
			text-shadow:水平阴影 垂直阴影 模糊度 颜色;
			多层文本阴影的设置
			text-shadow:第一层阴影,第二层阴影,第三层阴影;
			
			在单词内部换行
			word-wrap:;
				normal	默认值,不允许在单词内部换行
				break-word	允许在单词内部换行
				
			word-break:;
				break-all	允许在单词内部换行
				keep-all	允许在换行点换行,单词内部不换行
				
			box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 颜色 内外阴影(可选);
				默认影子在外面(忽略不写)
				设置影子在内部( inset )
				
			box-shadow:第一层阴影,第二层阴影,第三层阴影;
				
			
		-->
		<div class="box">阴影阴影阴影阴影阴影阴影阴影阴影</div>
		<div class="box2">阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影</div>
		<div class="box3">阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影阴影</div>
		
		<div class="box5"></div>
		<div class="box4"></div>
		
		
	</body>
</html>