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

您尝试加载的图片似乎是空白的。在任何情况下，下面的代码都是您所拥有的简化版本。

＆＃13;

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

＆＃13;

#v1  v2  v3   v4
0    1    2    3        
1    4    5    6       
2    10   10   17       
3    2    3    4
4    20   20   15        
5    20   88   16     
6    20   99   17
7    20   20   22
8    1    2    3
9    10   10   20

＆＃13;

Answer 2

<强> 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>

Answer 3

我不知道我是否过度简化了您的请求，但您能否考虑以下解决方案？

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>

CSS：如何制作图像边框

3 个答案: