CSS 列文本阴影

最新推荐文章于 2023-11-26 18:15:02 发布

小菜鸟码住

最新推荐文章于 2023-11-26 18:15:02 发布

阅读量130

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/102233374

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li:nth-child(4n){
				background-color: red;
			}
			li:nth-child(4n+1){
				background-color: #CCCCCC;
			}
			li:nth-child(4n+2){
				background-color: green;
			}
			li:nth-child(4n+3){
				background-color: yellow;
			}
			#abc{
				width: 500px;
				height: 200px;
				background-color: black;
				margin: 0 auto;
				/*border: 3px solid gray;*/
				box-shadow: 0 5px 6px 5px gray;
			}
			p{
				font-size: 35px;
				font:bold 50px helvetica arial;
				color: gray;
				text-align: center;
				line-height: 150px;
				font-family: arial;
				text-shadow: 0px 0px white,
				-3px 5px #333;
				-2px 5px 5px #ff3,
				-2px -1px 6px #fd3,
				2px -5px 1px #f80,
				2px -2px 8px #f20;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<div id="abc">
			<p>HTML5+CSS3</p>
		</div>
	</body>
</html>

在这里插入图片描述