html - CSS边框图像仅适用于顶部和底部

Question

我正在尝试为我的边框添加图像，但现在它似乎只适用于顶部和底部。我需要它绕过整个容器。

这是边框图像：

这是我的容器目前的样子：

相关HTML：

<div class="panel-blurb">
            <p class="panel-blurb-text">    
                Ad molestiae hendrerit mei,
                nobis persius deleniti et eum, ea ullum electram dignissim 
                his. Dicit dolorem moderatius in pro, dicat choro propriae ad mei.
                Dicat legimus efficiendi sit in. Natum falli cu nec. Id hinc regione 
                alienum vel, cu vide atomorum mel. Munere commodo at eos, te laudem docendi 
                volumus pro, maiorum dignissim ex sea.
            </p>
            <div class="panel-link-wrapper">
                <a class="panel-link" href="#">VIEW DETAILS</a>
            </div>
        </div>

相关CSS：

.panel-blurb{
    width: 88.5%;
    background-color: #54504f;
    padding: 25px;
    border-width: 15px;
    border-style: solid;
    border-image: url(images/border-min.png) 30;
}

Answer 1

无边框图像

div {
  width: 300px;
  height: 300px;
  background-color: #545050;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABf0lEQVQ4T12SB3LDMAwE+USLYgFYZOv/n8iCkBUlMxgV4A71wjnbkCwp1j22mo8un6G9pFbS1Mr30SrfmvfB72xYOI/OazbpNQOdUs5hAYx0ny5wZqtvcuE5OmYcp+GdWkbNln6FKfIGjQ29CVjwBizloh1arWAtQwoVLL1FuwFGA4wF2SOgq7QFFK9mmweOp7OaXckiacdCer3ytl0Ib2A0q9C8gk9lBJa0wC/jYCUuWhfPeps33EuucQPt4IuD4WVvLOrJYXpykfGGYQ/OvrE06+fBsfG+Xd12cWqKEJjhX2/80hshaH96swqSrSuf2G4vLojLA00WjR3A4YvqbOYb1kMLSmEM9/sy4VONw4APlD4f+abkhrTEbkpulPG7zMkNTEq/2iEGiNX5oXzLpiZoj+OiiaVR6kppNSEIlxIrNo3xtMpl+Ys3iQViuNgbjSIZOOAYppU8xBRNcV2S6WISe3cNaieLiT1uLDA2lJYTasLqvks2NDfll6fpMKcfxz4t98bmcAYAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABf0lEQVQ4T12SB3LDMAwE+USLYgFYZOv/n8iCkBUlMxgV4A71wjnbkCwp1j22mo8un6G9pFbS1Mr30SrfmvfB72xYOI/OazbpNQOdUs5hAYx0ny5wZqtvcuE5OmYcp+GdWkbNln6FKfIGjQ29CVjwBizloh1arWAtQwoVLL1FuwFGA4wF2SOgq7QFFK9mmweOp7OaXckiacdCer3ytl0Ib2A0q9C8gk9lBJa0wC/jYCUuWhfPeps33EuucQPt4IuD4WVvLOrJYXpykfGGYQ/OvrE06+fBsfG+Xd12cWqKEJjhX2/80hshaH96swqSrSuf2G4vLojLA00WjR3A4YvqbOYb1kMLSmEM9/sy4VONw4APlD4f+abkhrTEbkpulPG7zMkNTEq/2iEGiNX5oXzLpiZoj+OiiaVR6kppNSEIlxIrNo3xtMpl+Ys3iQViuNgbjSIZOOAYppU8xBRNcV2S6WISe3cNaieLiT1uLDA2lJYTasLqvks2NDfll6fpMKcfxz4t98bmcAYAAAAASUVORK5CYII='),
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABeklEQVQ4T12TDbLDIAiEPWLjP6hJev9LvA9N89LO0BlFll021EmOR5f33oij1RJ8fL1+ogY/pKya91CXvW8lnQvWZdRcwvYEpG27C86hvSYXt1eJvtfMnR5nE7JkFiD7TRHSqj0NHVpr9BMTvJa4z4cJq70k2MoE7FqoJkBCSLHjJylyoT3VC3aowRqAVhc/gCGZjJbkNEXmI7gPg8nF1uVqwRhddil0YVq6GIYeltWiKeySLz/u6GodAWBdt14OW2xKuponWYBpfWLoNcWbSQRyFibdGBsaSQ8Ms5HkiTM1nPEg9FpgRCE2oPhH25Jt7pHHbimupjC0LFuIpweL/Dq3egCbk7sa4bH2XcyTVWQtpk4O/y0mG8HubBIDtnCxZ8Rc39Tz1PJ0H5GjQYsimwcPoDJVa6P63J3PprIKtlZTMBKgxVjjaXzKKYBYDGm7F9Q2y2B9SqAAD/DeRE+L+DKsffps9B1TyPVfALb24FLMSEbyDYDqCzP0D2XlLfeYeYFOAAAAAElFTkSuQmCC'
),
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABeklEQVQ4T12TDbLDIAiEPWLjP6hJev9LvA9N89LO0BlFll021EmOR5f33oij1RJ8fL1+ogY/pKya91CXvW8lnQvWZdRcwvYEpG27C86hvSYXt1eJvtfMnR5nE7JkFiD7TRHSqj0NHVpr9BMTvJa4z4cJq70k2MoE7FqoJkBCSLHjJylyoT3VC3aowRqAVhc/gCGZjJbkNEXmI7gPg8nF1uVqwRhddil0YVq6GIYeltWiKeySLz/u6GodAWBdt14OW2xKuponWYBpfWLoNcWbSQRyFibdGBsaSQ8Ms5HkiTM1nPEg9FpgRCE2oPhH25Jt7pHHbimupjC0LFuIpweL/Dq3egCbk7sa4bH2XcyTVWQtpk4O/y0mG8HubBIDtnCxZ8Rc39Tz1PJ0H5GjQYsimwcPoDJVa6P63J3PprIKtlZTMBKgxVjjaXzKKYBYDGm7F9Q2y2B9SqAAD/DeRE+L+DKsffps9B1TyPVfALb24FLMSEbyDYDqCzP0D2XlLfeYeYFOAAAAAElFTkSuQmCC'
);
  background-position: top center, bottom center, center left, center right;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

<div></div>

Answer 2

你忘了加回合

你可以这样做

.panel-blurb{
    width: 88.5%;
    background-color: #54504f;
    padding: 25px;
    border-width: 15px;
    border-style: solid;
    border-image: url(images/border-min.png) 30 round;
}

Answer 3

试试这个。它会在四面八方给出边界

border-image:url('images/border-min.png') 30 30 round;

Answer 4

我自己做了一些工作，我认为你所做的只是将图像保存在边框的一侧，如果你复制它并制作一个像边框一样的框，它应该可以工作。我有同样的问题，你必须考虑边界的每一侧。当我这样做时，它解决了这个问题，只需制作一个新图像，添加顶部和底部翻转该图像裁剪它以便它适合并且你是金色的，我将我的设置为11 11 11 11 round。

我不确定它是否对你有用，但它对我有用。