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

马黑黑

HELLO CSS3! HELLO WORLD!

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

马黑黑

代码：

1. <style>
   
2. .bgBox {
   
3.         --dash: 6px; /* 虛線尺寸 */
   
4.         --fz: 16px; /* 字體大小 */
   
5.         --lh: 26px; /* 行高 */
   
6.         --cl: green; /*虛線顏色*/
   
7.         --bg: #eee; /* 稿紙背景色 */
   
8.         margin: 10px auto 0;
   
9.         width: 400px;
   
10.         height: 300px;
    
11.         background: var(--bg);
    
12.         background-image: linear-gradient(90deg,transparent var(--dash),var(--bg) 0),linear-gradient(transparent calc(var(--lh) - 1px), var(--cl) 0);
    
13.         background-size: calc(var(--dash) + 2px) 20px, var(--lh) var(--lh);
    
14.         border: 40px solid var(--bg);
    
15.         font: normal var(--fz) / var(--lh) Sans-serif;
    
16. }
    
17. .bgBox div, .bgBox p { margin: 0; padding: 0; }
    
18. </style>
    
19. 
    
20. <div class="bgBox">
    
21.         <p>HELLO CSS3! HELLO WORLD!</p>
    
22.         <p>　　明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边邑，思归多苦颜。高楼当此夜，叹息未应闲。</p>
    
23. </div>

复制代码

·支持中英文混输；
·支持p和div标签。使用其他标签请确保 margin和padding 设置为 0；
·退格请使用全角汉语空格

加林森

这个漂亮，老黑真厉害。

马黑黑

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

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

加林森

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

是的，挺好看的。

马黑黑

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

一般般吧，稿纸的样子

加林森

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

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

梦油

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

东篱闲人

黑黑的生化研究越来越深入啦。。。。

红影

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

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

红影

简介大方，这个信笺真好，黑黑真棒

马黑黑

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

嗯，应该写写

马黑黑

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

还行吧

马黑黑

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

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

马黑黑

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

啥呀？这是CSS样式

加林森

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

改天试一试。

樵歌

小黑太厉害了，只有没想到的，没有做不到的，牛叉呵

樵歌

我照葫芦画瓢，都不对呵

樵歌

HELLO CSS3! HELLO WORLD!

　　日照香垆生紫烟，遥看濗布挂前川，飞流直下三千尺，疑是银河落九天。

复制代码

樵歌

居然乱整出来了，