虚线网格稿纸 转自马黑教程专版

admin

HELLO CSS3! HELLO WORLD!

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

admin

<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>