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

时间:2016-03-29 15:31:47

标签: css

我正在设计一个网站,因为我最近一直专注于后台我不知道如何实现这一目标......也许有人可以帮助我

主要分区是1000px宽。并且想为这个由单个字母组成的div创建一个边框。我认为它会给人一种原始的外观,而不是添加一个带颜色的填充。

它看起来像这样:

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

有没有办法轻松实现这一目标。考虑到固定宽度div可以调整到设备,因此其宽度可能会有所不同。

1 个答案:

答案 0 :(得分:1)

您可以使用border-image来完成与您想要的非常接近的事情。我说非常接近,因为div的动态分辨率,很可能会裁掉一些角色。

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

  

位图重复(圆)

     

圆形选项是重复选项的一个变体,它以一种很好地连接两端的方式分配切片。

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

在你的情况下,它将由8个@个符号组成一个正方形。