朵拉 发表于 2022-5-19 23:07

信纸制作（马黑黑原创）

本帖最后由 朵拉 于 2024-1-24 23:17 编辑 <br /><br /><style>
.bgBox {
      --dash: 6px; /* 虛線尺寸 */
      --fz: 16px; /* 字體大小 */
      --lh: 26px; /* 行高 */
      --cl: green; /*虛線顏色*/
      --bg: #eee; /* 稿紙背景色 */
      margin: 10px auto 0;
      width: 400px;
      height: 300px;
      background: var(--bg);
      background-image: linear-gradient(90deg,transparent var(--dash),var(--bg) 0),linear-gradient(transparent calc(var(--lh) - 1px), var(--cl) 0);
      background-size: calc(var(--dash) + 2px) 20px, var(--lh) var(--lh);
      border: 40px solid var(--bg);
      font: normal var(--fz) / var(--lh) Sans-serif;
}
.bgBox div, .bgBox p { margin: 0; padding: 0; }
</style>

<div class="bgBox">
      <p>      醉赤壁【演唱：林俊杰】</p>
      <p>　　落叶堆积了好几层，而我踩过青春听见，前世谁在泪语纷纷。</p>
      <p>　　一次缘份结一次绳，我今生还在等一世，就只能有一次的认真。</p>
      <p>　　确认过眼神 我遇上对的人，我挥剑转身 而鲜血如红唇，前朝记忆渡红尘 伤人的不是刀刃
是你转世而来的魂。</p>
      <p>　　确认过眼神 我遇上对的人，我策马出征 马蹄声如泪奔，青石板上的月光照进这山城，我一路的跟 你轮回声 我对你用情极深。</p>
       <p>　　                                                                                                                                                         制作：朵拉</p>

</div>


<audio id="music" autoplay="autoplay" loop="loop" src="http://www.kumeiwp.com/sub/filestores/2021/02/23/cf1caa263a72301a4a96322c919796f3.mp3" ></audio>

朵拉 发表于 2022-5-19 23:26

本帖最后由 朵拉 于 2022-5-19 23:30 编辑

@马黑黑
马老师好 看过来，增加信纸行数，需要改动哪几句 {:4_190:}

马黑黑 发表于 2022-5-19 23:53

朵拉 发表于 2022-5-19 23:26
@马黑黑
马老师好 看过来，增加信纸行数，需要改动哪几句

CSS代码：

<style>
.bgBox {
      --dash: 6px; /* 虛線尺寸 */
      --fz: 16px; /* 字體大小 */
      --lh: 26px; /* 行高 */
      --cl: green; /*虛線顏色*/
      --bg: #eee; /* 稿紙背景色 */
      margin: 10px auto 0;
      width: 400px;
      height: 300px;
      background: var(--bg);
      background-image: linear-gradient(90deg,transparent var(--dash),var(--bg) 0),linear-gradient(transparent calc(var(--lh) - 1px), var(--cl) 0);
      background-size: calc(var(--dash) + 2px) 20px, var(--lh) var(--lh);
      border: 40px solid var(--bg);
      font: normal var(--fz) / var(--lh) Sans-serif;
}
.bgBox div, .bgBox p { margin: 0; padding: 0; }
</style>


红色那句，是稿纸的高度，改300为其它的数，行数就会发生变化。它的上一句是宽度，也可以修改

红影 发表于 2022-5-20 08:50

朵宝做出来了，真棒{:4_187:}

加林森 发表于 2022-5-20 09:54

朵拉制作得真好！{:4_199:}
页: [1]
查看完整版本: 信纸制作（马黑黑原创）