css - 通过 CSS 创建基于图像的自定义边框样式

Question

我正在创建 a website using Wordpress并想改变一些风格。我面临的一个挑战是为我最近的博客文章创建一个边框，使其看起来像附件中的那样。这是 image of the expected outcome

我有 SVG image file来 self 的设计师。考虑到可扩展性，我不打算使用图片作为背景。我听说了一种使用左侧作为边框和背景的方法 - 重复它。

我在这方面相对较新，如果有任何大师可以指导我如何做到这一点，我将不胜感激。任何替代方法也可以。

感谢一百万!

Answer 1

我知道您想使用 border CSS 方法，但我认为如果您的内容发生根本变化，很难在不扭曲图像的情况下做到这一点。 在仔细考虑并尝试了一些事情之后，我认为最好的方法是使用带有重复背景图像的伪元素来创建左边框效果。我认为这将是最灵活和最灵敏的途径。

我拼凑了一个CodePen demo带有大量注释的 CSS，因为我不确定您对 CSS 的总体熟悉程度。查看 CodePen 链接以获取更多详细信息，但这是它的一般要点:

HTML

<div class="book"> Your content goes here... </div>

CSS

.book {
  border: 2px solid #F3A333;
  position: relative;
}

.book:before { 
  content: ''; 
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: url(https://i.imgur.com/8X3apmL.png);
  background-size: 100% auto;
  width: 18px;
  transform: translateX(-55%);
}

希望对您有所帮助。您可以随意使用此代码和我为其制作的 SVG(显示在 CodePen 中)。