时间戳

首页 > 解决方案 > 基本问题，需要帮助：我不知道如何添加边框矢量？

css - 基本问题，需要帮助：我不知道如何添加边框矢量？

问题描述

我无法弄清楚这一点。边框是这样附加的，但是每当我尝试加载它时，它要么没有出现，要么看起来完全不同。我发现的所有 CSS 样式都是圆形的、拉伸的、透明的等，听起来都很棒，但总是会篡改图像——我需要的只是页面橙色顶部中心的边框。这可能是一件非常简单的事情，但我实际上已经做了好几个小时了，但它只是不起作用。><;;

它目前的样子（nvm 它在页面上的错误位置）： 在此处输入图像描述

全边框/它应该是什么样子（注意我将它缩小至少 50% 以适应）： 在此处输入图像描述

编码：

<style>
  #border {
    border: 10px solid transparent;
    padding: 10px;
    height: 50%;
    width: 50%;
    border-image: url(vborder.png) 30 round;
  }
</style>
<body>
  <div id="border">
    <h2>hello</h2>
    <p>this is text</p>
  </div>
</body>

谢谢你们！！^^

标签： cssborder

解决方案

我认为您在这里使用的边框图像太大。正如我所看到的，图像2550x3300以 px 为单位。对于边框图像来说太大了。

我增加了边框宽度，现在显示了边框图像。但我不认为这是你想要的。您可以查看此CodePen。

尝试在任何图像编辑器中缩小图像并再次尝试现有代码:)

==================================================== ======================

编辑： 我查看了文档，您实际上可以保留图像大小（这对网页大小不利，您应该缩小图像以获得更小的文件大小）。使用 的属性border-image-slice，您可以使用 CSS 直接缩放边框图像。

PS：我确实认为border: 10px这个边框图像太薄了。

推荐阅读