马黑黑 发表于 2022-4-17 19:50

花潮稿纸/信笺改进版

本帖最后由 马黑黑 于 2022-4-17 20:10 编辑 <br /><br /><style>
.txtBox {
      margin: auto;
      min-width: 700px;
        min-height:520px;
      background-image: linear-gradient(#fff 25px, #ed8181db 0);
      background-size: 26px 26px;
      font: normal 14px / 26px Sans-serif;
      color: black;
      border: 30px solid #fff;
      position: relative;
}
.txtBox::before, .txtBox::after {
      position: absolute;
      color: #ccc;
      text-align: right;
      width: 100%;
      height: 26px;
      font-size: 10px;
      background: #fff;
      border: 20px;
}
.txtBox::before {
      content: attr(data-1);
      top: -26px;
      border-bottom: 2px solid red;
}
.txtBox::after {
      content: attr(data-2);
      bottom: -26px;
      border-top: 2px solid red;
}
</style>

<div class="txtBox" data-1="花潮稿纸" data-2="Copyright © 2022 All Right Reserved">
我突然想到，我好久没有收到信件了。我就想，可不可以自己给自己写一封信。于是就下楼去小区的小小超市，找了好半天，也没找到信笺。服务生问我找什么，我说我找信笺。服务生把信笺听成信件，建议我如何如何处理，服务态度好到极端，我建议经理给他加薪。经理理解我的信笺是什么东东，在同意给服务生加薪之后，也给我提了个建议，就是去某某处，说那里有一个文化用品专卖店。<br>
算了，所谓的文化用品，卖的都是单身汉用得着的东西，我去不好，容易被人误解——这情何以堪？罢了罢了，我还是在电脑上写吧。<br>
写着写着，突然觉得哪里不对劲。嗯，是信笺问题。<br>
好吧，我需要一张信笺。然后就做了，这是昨晚的事情。<br>
今早又觉得，这信笺也不太像。观察了一阵子，知道问题在哪儿了：无头无尾。<br>
对，信笺，或稿纸，天地要有，所谓的页眉、页脚吧。这个可以考虑用两个伪元素来完成。还有，信笺或稿子的格子线是不画到边缘的，得留点空间。大概如此了吧。<br>
</div>

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

代码分享：<style>
.txtBox {
      margin: auto;
      min-width: 700px;
        min-height:520px;
      background-image: linear-gradient(#fff 25px, #ed8181db 0);
      background-size: 26px 26px;
      font: normal 15px / 26px Sans-serif;
      color: black;
      border: 30px solid #fff;
      position: relative;
}
.txtBox::before, .txtBox::after {
      position: absolute;
      color: #ccc;
      text-align: right;
      width: 100%;
      height: 26px;
      font-size: 10px;
      background: #fff;
      border: 20px;
}
.txtBox::before {
      content: attr(data-1);
      top: -26px;
      border-bottom: 2px solid red;
}
.txtBox::after {
      content: attr(data-2);
      bottom: -26px;
      border-top: 2px solid red;
}
</style>

<div class="txtBox" data-1="花潮稿纸" data-2="Copyright © 2022 All Right Reserved">
      文本<br>
        文本<br>
</div>

红影 发表于 2022-4-17 20:35

这个两个信笺又是新的玩法呢{:4_187:}

马黑黑 发表于 2022-4-17 20:56

红影 发表于 2022-4-17 20:35
这个两个信笺又是新的玩法呢

总之是尽模拟值能事吧

樵歌 发表于 2022-4-17 21:04

格子线用虚线再淡点更好哈。

马黑黑 发表于 2022-4-17 21:53

樵歌 发表于 2022-4-17 21:04
格子线用虚线再淡点更好哈。

这个在研发中

樵歌 发表于 2022-4-18 11:28

马黑黑 发表于 2022-4-17 21:53
这个在研发中

辛苦发{:4_176:}

马黑黑 发表于 2022-4-18 12:42

樵歌 发表于 2022-4-18 11:28
辛苦发

谢谢

红影 发表于 2022-4-18 15:44

马黑黑 发表于 2022-4-17 20:56
总之是尽模拟值能事吧

黑黑真棒{:4_187:}

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

红影 发表于 2022-4-18 15:44
黑黑真棒

不行啊，脑子不够用的。今天试做一个方格的，有一个算法愣是算不出来

红影 发表于 2022-4-18 21:49

马黑黑 发表于 2022-4-18 19:13
不行啊，脑子不够用的。今天试做一个方格的，有一个算法愣是算不出来

你说过的，碰到问题可以先冷处理，过后就清楚了。

马黑黑 发表于 2022-4-18 22:12

红影 发表于 2022-4-18 21:49
你说过的，碰到问题可以先冷处理，过后就清楚了。

希望如此吧

樵歌 发表于 2022-4-19 07:52

马黑黑 发表于 2022-4-18 12:42
谢谢

早上好{:4_173:}

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

樵歌 发表于 2022-4-19 07:52
早上好

早啊

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

来学习

樵歌 发表于 2022-4-19 21:29

马黑黑 发表于 2022-4-19 07:53
早啊

回个帖子峰会将为难找，以前是自动跳转到当页楼层，可现在不跳了，得一页页找，我我我，，，

马黑黑 发表于 2022-4-19 22:27

樵歌 发表于 2022-4-19 21:29
回个帖子峰会将为难找，以前是自动跳转到当页楼层，可现在不跳了，得一页页找，我我我，，，

怎么回事呢

红影 发表于 2022-4-20 11:55

马黑黑 发表于 2022-4-18 22:12
希望如此吧

看你那么快弄出来了，貌似没经过冷处理的过程呢{:4_173:}厉害{:4_199:}

马黑黑 发表于 2022-4-20 12:11

红影 发表于 2022-4-20 11:55
看你那么快弄出来了，貌似没经过冷处理的过程呢厉害

原理了然于胸的

红影 发表于 2022-4-20 20:01

马黑黑 发表于 2022-4-20 12:11
原理了然于胸的

黑黑太厉害了{:4_199:}
页: [1] 2
查看完整版本: 花潮稿纸/信笺改进版