問題タブ [border-image]

次のように、div の下部に画像の境界線を追加しています。

HTML:

CSS:

これはうまくいきましたが、実際にborder-imageは私のdiv.

問題の写真:

この問題を解決するにはどうすればよいですか?

デモはこちら

このページhttp://wildlife.x-tremeteam.comでは、CSS の border-image プロパティと、縁が透明な .png 画像を使用して、div に「破れた紙」の外観を作成しています。私の Android (Samsung SIII) を除いて、デフォルトのブラウザーを使用しているか、Chrome アプリを使用しているかにかかわらず、うまく機能します。その上で、20px の境界線の内側と外側にわずかなエッジが見られます。興味深いことに、角にエッジが見えません。ボーダーのある div の背景は透明です。その中の div にのみ背景色を適用します。

デスクトップのブラウザー、テストに使用する iPhone、responsinator.com のすべてのレンダリングでは、画像の端が表示されません。

div の background-color プロパティと関係があるはずです。これを RED に設定すると、エッジが赤くなるからです。ただし、このプロパティを透明にしても削除されません。

CSS は次のとおりです。これには、役に立たなかったデフォルトの div プロパティも含まれています。

ありがとう、私はこれを何時間も見つめていて、理解できません。

この画像をボタンの境界線で繰り返したいです。全幅の画像ではなく、中央部分のみが表示されるという事実を除いて、正常に機能します。イメージ全体を繰り返すにはどうすればよいですか?

フィドル

私のコード:

編集：

私はそれを行う方法を見つけました（少なくとも私の場合は、私が望んでいた方法で機能しました）。画像を9つの部分にスライスしborder-image-slice、真ん中だけを繰り返すので、同じ部分が3回表示されるように画像を編集しました。これで画像がスライスされ、中央部分は完全な画像のままです。

ラジオボタンをクリックして境界線の画像を変更しようとしていますが、次のことを行っています:

次のエラーが表示されます。

これが「border」オプションでは機能するのに、「borderImage」オプションでは機能しないのはなぜですか。ドキュメントのさまざまな部分で定義しているすべての JS 関数が認識されないため、onclick で定義したいと思います。

はとborder-top-colorはです。グラデーションは、およびの上部の色から下部の色に移行することを目的としています。#9b9c9dborder-bottom-color#f6f9fcborder-leftborder-right

border-left-imageと とborder-right-imageをborder-top-colorどのように組み合わせるのborder-bottom-colorですか?

HTML

CSS

CSS3 ボーダー画像を scale3d 変換と組み合わせて使用​​しています。Google Chromeを除いて、うまく機能します。クロムは、背景がクリッピングされている境界画像タイルの間にいくつかの透明なストライプを表示します.

スクリーンショットを作成しました：

HTMLコードは次のとおりです。

そしてCSSコード：

私もあなたのためにフィドルを作りました: https://jsfiddle.net/kd7sz0s5/1/

問題は scale3d コマンドに関係しているようです。scale3d 値を偶数に設定するとストライプが消えてしまうためです (例: scale3d(3,3,1))。

皆さんが私を助けてくれることを願っています。

私は CSS が初めてで、下の画像のように div の境界線として 2 つの線形グラデーションを作成するタスクがあります。

内側に使用border-imageしましたが、もう一方の境界線を作成する方法がわかりません。

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

border-imageとにかく、この画像を使用して素敵な境界線を作成するため にプロパティを使用しようとしています:

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

JSFiddle

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

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

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