問題タブ [border-image]

だから私は境界線を持つdivを持っています。ただし、境界線の画像は表示されません。通常の実線で表示します。奇妙なことに、URL は有効で機能しており、Google ドライブからのもので、すべて問題ないようです。HTML 自体は機能しますが、メールで使用すると機能しません。

本当に奇妙です。私はこのようなものを見たことがありません。ところで、Gmail に送信していますが、 Outlookなどで動作するかどうかわかりません。

PS:境界線が少し奇妙に見えることはわかっています。高さが低いからです。それはわかっているので、文句を言わないでください。

このコードで水平（/垂直）の境界線のみを作成しようとしています：

できます。ただし、Chrome のみ。クロム

Firefox の行は方向を入れ替えます。縦になる： FF

「border-image-slice: 100% 1%;」を変更すると 「border-image-slice: 1% 100%;」に ブラウザも効果を変えます。

多分誰かがそれに対処しますか？多分私は何かを逃した？クロスブラウザソリューションが存在する可能性があります。

境界線に画像を追加しようとしていますが、現在は上下にしか機能していないようです。コンテナ全体を一周する必要があります。

境界線の画像は次のとおりです。

現在、私のコンテナは次のようになっています。

関連する HTML:

関連する CSS:

div の周りに境界線の画像を配置しようとしています。css-tricks のヒントに従いましたが、うまくいきません。これはページです: http://darylkeep.com/aanbod/

編集:div全体に1つではなく、コーナーに4つの小さな境界線が表示されます。どうしてこれなの？

また、これまでこのプロパティに出くわしたことがないので、これがまだこれを行う方法なのかどうかも疑問に思っています。より良い方法はありますか？前もって感謝します。

.

CSS で短縮構文を使用しようとしていborder-imageます。たとえば、次のようになります。

ただし、同時にLESSを使用しています。その場合、スラッシュは分割の記号でもあり、その式は次のようになります。

fillステートメントのスラッシュの直前にキーワードを追加して、中央の領域内で画像を透明にしようとしています。ただし、これは私が望んでいたものではなく、border-image-outsetプロパティに別のスラッシュを追加することはできません。

のような個々のプロパティを使用しても問題ありませんが、 http://caniuse.com/#search=border-imageborder-image-sliceによると、一部のデバイスでは機能しません。私は Android プロジェクトに取り組んでおり、ここではモバイル互換性が必要です。

他の解決策はありますか？ありがとう。

繰り返しグラデーションを として使用するとき、またはFF 以外のブラウザーで繰り返しグラデーションを として使用するときに、background-repeat: spaceand/orのようなことを達成することは可能ですか?background-background: roundbackground-imageborder-image-repeat: space|roundborder-image

これは、 Create a perfect dashed line with background-image in CSSに触発されたもので、最後に部分的なダッシュのない破線を作成する方法を求めています。その場合、 はbackground-imageイメージ ファイルだったので、background-size: repeatまたはbackground-repeat: roundで動作します (正確なニーズによって異なります)。

linear-gradientしかし、それを aまたはrepeating-linear-gradientasbackground-imageまたは で動作させることはできませんborder-image。いくつかの例:

最初の例 ( #linear-gradient-background-image) は FF で動作します。ただし、そうでない場合は、 の右端に部分的なダッシュが描かれる幅がありdivます。

Webkit ブラウザーでは#linear-gradient-background-image、コンテナーのサイズが変更されたときに 's ダッシュが何らかの調整を行っていることがわかりますが、それが何をしているのかはわかりません。

ページに「エンベロープ ボーダー」効果を実装しようとしました。

基本的には、これは codepen の場合と同じです:

http://codepen.io/danichk/pen/KdorYJ

しかし、サファリでは機能しません。また、w3schools の「border-image」の例でさえ機能していないようです。マルチブラウザのサポートをすでに検討しています。

http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image3

実際、以下のように「マルチブラウザ」に適した css を生成するためにコンパスも試しました。

方位磁針：

CSS

誰かそれについて何か考えがありますか？どうもありがとう。

私の Safari のバージョンは次のとおりです。バージョン 10.0.1 (12602.2.14.0.7)