CSS + HTML 实现纸张类似稿纸效果

最新推荐文章于 2024-02-19 14:13:37 发布

_yangyi

最新推荐文章于 2024-02-19 14:13:37 发布

阅读量1.3k

点赞数 1

分类专栏：总结文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44093204/article/details/125097687

版权

总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

直接上例子：

（重点：background-image: repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background: #CCCCCC;
			}
			.page{
				    width: 21.7cm;
				    min-height: 29cm;
				    margin: 20px auto;
				    line-height: 44px;
				    background-image: -webkit-repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);
				    background-image: repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%);
			}
		</style>
	</head>
	<body>
		<div class="page" contenteditable>
			这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字这是一段很长很长的文字
		</div>
	</body>
</html>

效果：在这里插入图片描述

 代码解释：通过背景进行线性渐变（linear-gradient）以达到稿纸效果；
 说明：repeating-linear-gradient(#ffffff,#ffffff 3.8%,#000 4%)，3.8%与4%之间就是线条的宽度，但是这样做出来的有缺陷，
 这种线条并不能随内容增多而保持原有的线与线的距离。如下图：