方格稿纸预览版

马黑黑 · 发表于 2022-4-18 21:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

悟空我徒：

　　见信好。

　　来信已阅，未料仙界是这番纷纷扰扰，幸亏我遁世已久，已能云淡风轻，许多事情越是年纪大了，越是看不明白，有时候我一个人的时候，也是会想这样那样的问题，可惜为师资质愚钝，无法如佛祖释迦牟尼那般六年顿悟，现如今的世道，无论仙界佛界还是妖界，都不是一个乱字了得的。

　　好了，师傅我要做午课了，就此搁笔。

……

　　　　　　　　　　　　　　　　玄奘

马黑黑 · 发表于 2022-4-18 21:33

代码：

<style>
.wrap {
--fz: 16px; /* 字体大小 */
--grid: 26px; /* 方格高宽 */
--bg: #d6ecf0;
margin: auto;
width: calc(var(--grid) * 21 - (var(--grid) - var(--fz)) / 2); /* 宽度 20格 */
border-style: solid;
border-color: var(--bg);
border-width: 40px 20px 40px 40px;
}
.fge {
width: 100%;
min-height: calc(var(--grid) * 10); /* 最少高度 10格*/
padding-left: calc((var(--grid) - var(--fz)) / 2);
background: var(--bg);
background-image: linear-gradient(transparent calc(var(--grid) - 1px), red var(--grid)), linear-gradient(90deg, transparent calc(var(--grid) - 1px), red var(--grid));
background-size: var(--grid) var(--grid);
border-style: solid;
border-width: 1px 0 0 1px;
border-color: red;
font: normal var(--fz) / var(--grid) Sans-serif;
letter-spacing: calc(var(--grid) - var(--fz));
word-wrap: break-word;
word-break: break-all;
white-space: normal;
position: relative;
}
.fge::before { /* 遮盖最右边方格 */
content: '';
position: absolute;
width: var(--grid);
height: calc(100% + 1px);
right: 0;
top: -1px;
background: var(--bg);
}
.fge p, .fge div { margin: 0; padding: 0; }
</style>
<div class="wrap">
<div class="fge">
<p>悟空我徒：</p>
<p>　　见信好。</p>
<p>　　来信已阅，未料仙界是这番纷纷扰扰，幸亏我遁世已久，已能云淡风轻，许多事情越是年纪大了，越是看不明白，有时候我一个人的时候，也是会想这样那样的问题，可惜为师资质愚钝，无法如佛祖释迦牟尼那般六年顿悟，现如今的世道，无论仙界佛界还是妖界，都不是一个乱字了得的。</p>
<p>　　好了，师傅我要做午课了，就此搁笔。</p>
<p>……</p>
<p>　　　　　　　　　　　　　　　　玄奘</p>
</div>
</div>