如何从图片源围绕 CSS 组件制作边框

Question

我有一张 png 图片，周围有一些边框，里面是空的 http://i.imgur.com/ji4M0VW.png I wanted to use it as a frame for some text/picture that could be fit inside, sometimes this effect is visible on webpages when people are presenting content inside e.g. an iphone - the picture is just the border and the component inside is fully responsive. I played around, but I only managed to achieve something far from the expected result here https://jsfiddle.net/m6r2whyu/。到目前为止我的 CSS:

#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch;
}

效果不佳。有谁知道我可以在这里解决什么问题？

Answer 1

我以前完成这个任务的方法是使用 Photoshop。有一个名为 'background eraser tool' 的易于使用的工具，可让您擦除图像中心的白色 space 以使其透明。内部透明后，您可以将图像用作另一图像的叠加层。

Answer 2

添加了一些样式，效果差不多了

#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(http://i.imgur.com/ji4M0VW.png) 30 stretch;
      border-image-slice: 9% 15% 12% 15%;
  border-image-width: 33px;
    height: 300px;
    width: 300px;
}

<p id="borderimg2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat aliquet pellentesque. Pellentesque iaculisdiam sit amet vehicula mattis. Cras gravida sed libero sed consequat. Nam efficitur sed sem sed vehicula. Aliquam ultrices aliquam mattis. Nunc odio urna, pharetra a augue tempus, laoreet scelerisque odio. Cras non rutrum lectus. Vestibulum condimentum vehicula scelerisque. Sed sed mattis nibh. Aliquam porta dui a risus sodales accumsan. Nullam in neque diam.</p>

资源

properties explained

online generator

如何从图片源围绕 CSS 组件制作边框

How to make a frame around CSS component from a picture source

html

css

webkit

资源