0

これがプログラム的なものなのか、写真の編集的なものなのかわからないので、ここに投稿します。これを別の場所に投稿する必要があった場合は、お詫び申し上げます。

border-imageとにかく、この画像を使用して素敵な境界線を作成するため にプロパティを使用しようとしています:ウェブで見つけたボーダーの画像

しかし、それは私とはうまくいきません。変な目で見られます。これが私のコードです： 

#div{
        -webkit-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Safari 3.1-5 */
        -o-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Opera 11-12.1 */
        border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat;
    	border-width: 100px;
    	border-style: solid;
    	height: 200px;
    	width: 100px;
    }
  <body>
  <div id="div">Hello world!!!</div>
  </body>

JSFiddle

だから、これを修正するためのヒントが必要です。結果は次のようになります(正確ではありません)。

同様に、境界線は次のようになります

幅は定義されないことに注意してください。延長可能

かなり、画像の中央部分を繰り返し、端を残す必要があります。しかし、私は新生児の絵の結果を得ています。それで、これに対するヒントや解決策はありますか?? 私は調査を行いましたが、どれも私の欲求を含んでいません.

4

1 に答える 1

1

問題は、ボーダーに使用している画像です。使用している画像は、境界線の各セクションにスライスしようとしています。border-image画像を取得して周囲に並べるようには設計されていません。中央がdiv areaである 9 つのセクション (三目並べボードを考えてください) に分割されるように設計されています。

スライス画像

画像の各スライスは、あなたの場合のように、側面を繰り返すことができるそれぞれの境界線に適用しようとしています。CSS-Tricksには、これに関する素晴らしいページがあります。

これを修正する 1 つの方法は、必要な画像を自分で編集し、独自の境界線を設定することです。コピー＆ペーストと回転。このようにして、CSS で使用するときに適切なセクションを切り出すことができます。

于 2016-06-26T01:43:10.590 に答える