马黑黑 发表于 2022-4-19 12:33

樵歌要的虚线网格稿纸新鲜出炉

<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>HELLO CSS3! HELLO WORLD!</p>
        <p>　　明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边邑，思归多苦颜。高楼当此夜，叹息未应闲。</p>
</div>

马黑黑 发表于 2022-4-19 12:36

代码：
<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>HELLO CSS3! HELLO WORLD!</p>
        <p>　　明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边邑，思归多苦颜。高楼当此夜，叹息未应闲。</p>
</div>·支持中英文混输；
·支持p和div标签。使用其他标签请确保 margin和padding 设置为 0；
·退格请使用全角汉语空格

加林森 发表于 2022-4-19 12:44

这个漂亮，老黑真厉害。{:4_199:}

马黑黑 发表于 2022-4-19 12:45

加林森 发表于 2022-4-19 12:44
这个漂亮，老黑真厉害。

这个代码也不多，没有方格稿纸的多吧

加林森 发表于 2022-4-19 12:46

马黑黑 发表于 2022-4-19 12:45
这个代码也不多，没有方格稿纸的多吧

是的，挺好看的。

马黑黑 发表于 2022-4-19 12:47

加林森 发表于 2022-4-19 12:46
是的，挺好看的。

一般般吧，稿纸的样子

加林森 发表于 2022-4-19 12:55

马黑黑 发表于 2022-4-19 12:47
一般般吧，稿纸的样子

这样很好看的。习惯了，看到就以为又要写文章了。{:4_189:}

梦油 发表于 2022-4-19 13:34

黑黑朋友下午好！你真是一位不可多得的才子，你真棒！羡慕！

东篱闲人 发表于 2022-4-19 14:40

黑黑的生化研究越来越深入啦。。。。{:5_116:}

红影 发表于 2022-4-19 15:27

马黑黑 发表于 2022-4-19 12:45
这个代码也不多，没有方格稿纸的多吧

这个更简洁，而且“支持中英文混输”。
那个方格稿纸好像遇到数字，占位会发生变化呢。

红影 发表于 2022-4-19 15:28

简介大方，这个信笺真好，黑黑真棒{:4_199:}

马黑黑 发表于 2022-4-19 18:52

加林森 发表于 2022-4-19 12:55
这样很好看的。习惯了，看到就以为又要写文章了。
嗯，应该写写

马黑黑 发表于 2022-4-19 18:52

红影 发表于 2022-4-19 15:28
简介大方，这个信笺真好，黑黑真棒

还行吧

马黑黑 发表于 2022-4-19 18:53

红影 发表于 2022-4-19 15:27
这个更简洁，而且“支持中英文混输”。
那个方格稿纸好像遇到数字，占位会发生变化呢。

你用全角数字和全角字母就可以

马黑黑 发表于 2022-4-19 18:53

东篱闲人 发表于 2022-4-19 14:40
黑黑的生化研究越来越深入啦。。。。

啥呀？这是CSS样式

加林森 发表于 2022-4-19 19:13

马黑黑 发表于 2022-4-19 18:52
嗯，应该写写

改天试一试。

樵歌 发表于 2022-4-19 20:35

小黑太厉害了，只有没想到的，没有做不到的，牛叉呵{:4_190:}

樵歌 发表于 2022-4-19 20:36

我照葫芦画瓢，都不对呵{:4_198:}

樵歌 发表于 2022-4-19 20:39

<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>HELLO CSS3! HELLO WORLD!</p>
      <p>　　日照香垆生紫烟，遥看濗布挂前川，飞流直下三千尺，疑是银河落九天。</p>
</div>
复制代码

樵歌 发表于 2022-4-19 20:41

居然乱整出来了，{:4_199:}
页: [1] 2
查看完整版本: 樵歌要的虚线网格稿纸新鲜出炉