使用css3实现首字下沉

最新推荐文章于 2022-09-17 12:09:24 发布

@CJL

最新推荐文章于 2022-09-17 12:09:24 发布

阅读量594

点赞数

CC 4.0 BY-SA版权

分类专栏：练习

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103677277

练习专栏收录该内容

36 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用css3实现首字下沉</title>
		<style type="text/css">
			*{margin: 0;padding: 0;font-family: "microsoft yahei";}
			.box{width: 400px;border: 1px solid #ccc;margin: 40px auto;padding: 10px;}
			.box h2{border-bottom: 1px solid #ccc;padding-bottom: 5px;}
			.box p{line-height: 2;}
			.box p::first-letter{
				font-size: 30px;
				border-radius:50px ;
				background: #CCCCCC;
				color: #FFFFFF;
			}
			.box p::selection{
			background-color: #000;
			color: #f90;
			text-shadow: 2px 1px 2px #e6ff7b;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>汽车新闻</h2>
		<p>特斯拉突破300美元大关，让该公司总市值达到527亿美元，高于通用汽车496亿美元的市值，进而成为全美市值第一汽车制造商。</p>
		</div>
	</body>
</html>