border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。

うーん、簡単そうですね。実装のアイデアは次のとおりです

本体は div なので、グラデーション、境界線、丸い角を追加するだけです。
インゴットは左側の画像を切り取り、::before を使用して左側に配置します。
マウスは画像の右側を切り取り、::after を使用して右側に配置します。

基本的には難しくなく、数分で完了します。それまで...

製品: ちなみに、このバブルチャートは後でバックグラウンドで設定できるようになります。その後、ユーザーの個人署名として扱われる画像をアップロードするだけで済みます。私：！！！ (╯‵□′)╯︵┻━┻

これはちょっと恥ずかしいですね。商品のBefore写真とAfter写真を用意して、その間に自分でグラデーションを書くことはできません。もうすぐ殺されてしまうだろう。

仕事を始めて間もない頃、Android の同僚が .9png というものについて話しているのを聞いたので、フロントエンドで同様の効果を実現できるかどうかをオンラインで検索しました。案の定、見つけました。

.9png

.9pngとは何ですか? .9png は Android 上の画像形式で、特にバブル効果に使用されます。写真を9分割し、四隅の領域が引き伸ばされないのが特徴です。真ん中の部分だけが伸びます。

この方法では、コンテンツ領域が拡大しても、コーナーに保持された要素は変形されません。

フロントエンド実装

賢い学生はここをクリックして直接効果を見ることができます https://codepen.io/gong12339/pen/PowxmzL

フロントエンドに .9png を実装するには、次の属性が必要です。

公式に推奨されている .9png 画像の解像度は 81 * 81 なので、9 つのカット領域はそれぞれ幅と高さが 27 * 27 になります。私の作品は長方形なので、スライスの位置を自分で測定する必要があります。そして私の写真は明らかに垂直方向の伸縮をサポートしていません

。国境 {
  境界線の幅: 18px 44px 25px 28px;
  境界線のスタイル: solid;
  境界線画像のソース:url(https://raw.githubusercontent.com/gong12339/vic-blog/master/static/img/border.9.png);
  境界線画像スライス:25 44 25 28 塗りつぶし;
  画像の境界線の幅:25px 44px 25px 28px;
}

border-width: 27px; 境界線の幅を設定する
border-style: solid; 境界線の種類を設定する
境界線画像のソース: url('a.png')
画像アドレスを設定するだけで、何も言うことはありません
画像スライスの境界線: 27 27 27 27;
スライスの位置（上、右、下、左）を設定します。すべて同じ場合は、1 つだけ記述できます。
画像の境界線の幅: 27px 27px 27px 27px;
境界線の幅（上、右、下、左）を設定します。すべて同じ場合は、1つだけ記述します。

ここでは、画像の上、右、下、左から対応する距離に線を描き、画像を 9 つの領域に分割する (単位を含めることはできないことに注意してください) border-image-slice -slice に焦点を当てます。