css - 创建一个由单个字母组成的框架

Question

我正在设计一个网站，因为我最近一直专注于后台，所以我不确定如何实现这一目标。也许有人可以帮助我

主 div 的宽度为 1000 像素。并想为这个由单个字母组成的 div 创建一个边框。我认为它会给出一个原始的外观，而不是添加一个带有颜色的填充。

它看起来像这样:

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@                            @
@                            @
@                            @
@                            @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

有没有办法轻松实现这一目标。考虑到固定宽度的 div 可以根据设备进行调整，因此它的宽度可能会有所不同。

Answer 1

您可以使用 border-image完成一些非常接近你想要的事情。我说非常接近，因为 div 的动态分辨率，所以可能会裁剪一些字符。

您可以将 round 选项添加到规则中以防止任何字符裁剪:

Bitmap repeated (round)

The round option is a variation on the repeat option that distributes the tiles in such a way that the ends nicely connect.

显示如何创建图像本身的有用文章:https://css-tricks.com/almanac/properties/b/border-image/#article-header-id-10

在您的例子中，它将由 8 个 @ 符号组成一个正方形。