CSS：私はdiv要素の周囲に境界線の画像を配置しようとしている画像ボーダー

の作り方。私は、CSS-トリックにヒントを追ったが、私はそれを動作させることはできません。 http://darylkeep.com/aanbod/CSS：私はdiv要素の周囲に境界線の画像を配置しようとしている画像ボーダー

EDIT：このページで私は4つの少し隅に国境はなく、全体の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; 
}

出典

2016-09-08 Stef

[CSSボーダー・映像作品を作る方法]の可能性のある重複します（http：//スタックoverflow.com/questions/7860114/how-to-make-css-border-image-work） – Ricky

あなたの答えはここにあります： http://stackoverflow.com/questions/7860114/how-to-make-css -border-image-work？rq = 1 – Ricky

'http：//'または 'https：//'を 'www'の前に追加してみてください – j08691

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-08 16:01:27

私はあなたの要求を単純化しているかどうかわかりませんが、次の解決策を検討できますか？

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-08 15:36:30

デスクトップ上で見るだけであれば問題ありませんが、携帯電話でdivが伸びても見栄えは良くありません。あなたの提案をありがとう – Stef

ロードしようとしているイメージが空白になっているように思えます。いずれの場合も、以下のコードは、あなたが持っているものの簡易版です。

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

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

出典

2016-09-08 15:40:01 darham

CSS：私はdiv要素の周囲に境界線の画像を配置しようとしている画像ボーダー

答えて

関連する問題