资源

Question

我有一张png图片，周围有一些边框，在http://i.imgur.com/ji4M0VW.png里面是空的我想把它用作一些文字/图片的框架，可以放在里面，有时这种效果在网页上可见在内部展示内容一个iPhone - 图片只是边框，内部组件完全响应。我玩过，但我只是设法在这里找到了远远超出预期结果的东西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。有一个易于使用的工具，称为＆＃39;背景橡皮擦工具＆＃39;这将允许您擦除图像中心的空白区域，使其透明。内部透明后，您可以将图像用作另一个图像的叠加层。

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组件制作框架

2 个答案:

资源