Question

我正在努力弄清楚如何在此处添加类似于图像的边框。菱形/方形旋转边框。我已经尝试过边框图像，但似乎无法加载它们。

这两者

    border-image: url('path-to-your-png') 33% round;
    /* border-image: url('content/uploads/2018/07/border.png')  33% round;
    border-width: 0 0 20px 0;
    margin-left: 1px; */

还有这个

    border-image-source: url('content/uploads/2018/07/dots.svg');
    border-image-slice: 33% 33% ;
    border-image-repeat round;

没有工作。（我也删除了链接网址，但我肯定我在真实代码中使用的链接是正确的。

Border I'm looking to recreate

Answer 1

CSS border-image属性可以完成这项工作。

查看文档：{{3}}

.border-diamond {
  border: 10px solid transparent;
  border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}

<div class="border-diamond">
  Content here
</div>

菱形/旋转方形边框

1 个答案: