CSS: 如何制作图片边框

Question

我正在尝试在 div 周围放置边框图像。我遵循了 css-tricks 上的提示，但我无法让它工作。这是页面：http://darylkeep.com/aanbod/

编辑：我在角落有四个小边框，而不是整个 div。这是为什么？

我也想知道这是否仍然是执行此操作的方法，因为我之前没有运行穿过这个属性。有没有更好的办法？提前致谢。

<div id="main-content">stuff</div>

.

#main-content {   
  margin-top: 30px; margin-bottom:30px; padding:20px 20px 20px 20px; width:80%;
  background:rgba(255, 255, 255, 0.7);  
  border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -moz-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -webkit-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -o-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  -ms-border-image-source: url(www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png); 
  border-image-slice:2,8% 1,7% 2,8% 1,7%; 
  border-image-repeat: stretch;
  border-image-width:100px;
  border-width:50px;
  border-style: solid;
}

Answer 1

不知道是不是把你的要求简单化了，你可以考虑下面的解决方案吗？

https://jsfiddle.net/5asgtLr3/

<html>
    <head>
        <style>
            div.border{
                background-image: url(http://www.darylkeep.com/wp-content/themes/darylkeep/assets/images/wiggly_border_full.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;    
            }
            div.content{
                color:white;
                padding: 30px 40px 30px 40px;
            }
            body{
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="border">
            <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a varius libero, at luctus urna. Donec vel hendrerit quam. Duis scelerisque orci ornare sapien pharetra commodo. Ut elementum nisl et vehicula elementum. Fusce porta arcu tincidunt nunc elementum pharetra. Ut vitae placerat est. Vivamus faucibus iaculis augue vel pharetra. Praesent vel vulputate ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales porttitor lectus in sagittis. Donec in ligula lorem. Sed scelerisque, ipsum a maximus viverra, lectus sapien gravida libero, a facilisis erat felis eu magna.
            </div>
        </div>
    </body>
<html>

Answer 2

您尝试加载的图像似乎是空白的。无论如何，下面的代码是您所拥有的代码的简化版本。

#main-content {   
  border: 50px solid #cc4242;
 padding: 15px;
 border-image-source: url('http://codeitdown.com/samples/zigzag_red.png');
 border-image-slice: 10;
 border-image-repeat: round;
}

<div id="main-content">stuff</div>

Answer 3

CSS

div{
width:300px;
height:auto;
padding:25px;
border:10px solid #999;
text-align:justify;
position:absolute;
top:25%; 
left:35%;
border-image:url(Light-green-elegant-embossed-frame-rectangular-powerpoint-border.png) 20 repeat;
}

HTML

<div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

CSS: 如何制作图片边框

CSS: How to make an image-border

html

css

border

border-image