0

我正在尝试在 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;
}
4

3 回答 3

1

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

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

于 2016-09-08T15:40:01.560 回答
1

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>
于 2016-09-08T16:01:27.567 回答
0

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

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>
于 2016-09-08T15:36:30.557 回答