CSS3ボーダーイメージプロパティの写真作りは本当にクール！
境界線を作成することは新しいことではありません。 HTML ＆ CSS;初めから境界線を追加することができました。あなたは、実線、点線、破線などについてよく知っているかもしれません。.
しかし、新しいCSS3のborder-imageプロパティでは、HTML要素にボーダーを作成することがより高度になっています。簡単に言うと、画像をソースとして使用して境界線を追加できるようになりました。これにより、より魅力的な境界線を追加できます。それでは、このプロパティがどのように機能するのかを見てみましょう。.
構文とブラウザのサポート
CSS3の境界線画像は、次の短縮構文を使用して定義されています。
border-image：[画像ソース] [スライス] [幅] [アウトセット] [繰り返し];
上記の構文は、ChromeでのみサポートされているW3Cの公式バージョンです。一方、Opera、Firefox、およびSafariでは、引き続きプレフィックスバージョンが必要です（-○-, -モズ-, -ウェブキット-そして、Internet Explorerは驚くことにこのプロパティをまったくサポートしていません。.
さらに、 [幅] そしてその [最初] この中の値 ボーダー画像 このプロパティはどのブラウザでもまだサポートされていませんが、widthの値は ボーダー幅 財産.
だから、要するに、今のところ私たちは唯一の値を適用することができます [画像ソース], [スライス] そして [繰り返す] .
border-image：[画像のソース] [スライス] [繰り返し];
画像スライス
この性質を実証する前に、について話しましょう。 “画像スライス” それはプロパティを宣言することにおいて新しい何かであるので最初に。ここでの画像スライスは、次の画像に示すように、画像エッジの上下左右から開始点をそれぞれとる画像のカットを定義します。.
上の画像では、セクションが 1, 3, 7 そして 9 境界線の角になります 2, 4, 6 そして 8 境界線のエッジまたは線になります。境界線になるセクションが繰り返し可能または伸縮可能であることを確認してください。.
スライスの値は次のように宣言できます。 ピクセル 単位またはパーセンテージ （％） フレキシブル測定用ユニット.
より多くの参照：
- CSSの背景と境界線レベル3
フォトフレームを作成する
それでは、実際の例でその性質を説明しましょう。.
今回は、実装します。 ボーダー画像 フォトフレームを作成するためのプロパティで、ソースとして以下の画像を使用します。内容の幅や高さに関係なく、適切にスライスし、繰り返し、拡大できるように、慎重に画像を測定しました。.
注意： あなたはこのリンクから上の画像をダウンロードすることができます.
また、今回のデモでは、From Me to Youの素晴らしいCinemagraphを写真として使用します。.
（画像ソース：私からあなたへ）
マークアップ
マークアップはこれと同じくらい簡単です：
交換することを忘れないでください images_2 / css3-border-image-property-making-photos-really-cool_3.jpg あなた自身の写真と一緒に.
スタイル
それでは、を使ってフレームを作りましょう。 ボーダー画像.
上の画像を見ると、画像の幅は 180px 合計で。この値は次に分割することができます 6 各部門は 30px;それで、画像を次のようにスライスします。 30px.
スライスに長さの値を使用する場合は、 px 自動的にに変換されるので、unit ピクセル, あなたがパーセンテージを使用することにした場合でも、あなたはまだ追加する必要があります （％）.
画像の繰り返しについては、デフォルトを使用します。 繰り返す. 代わりに、あなたは使用することができます ストレッチ 心配しないで、境界線の画像はまだ優雅に見えます.
img border-image：url（ "images / frame.png"）30繰り返し; -o-border-image：url（ "images / frame.png"）30繰り返し; -moz-border-image：url（ "images / frame.png"）30繰り返し; -webkit-border-image：url（ "images / frame.png"）30繰り返し;ボーダー幅：30px。
さらに、画像をより魅力的にするために、画像をブラウザウィンドウの中央に配置し、背景テクスチャをドキュメントに追加したいと思います。.
html background：url（ 'images / lightpaperfibers.png'）;ラッパーmargin：20px auto;高さ：476ピクセル。幅：675ピクセル。 text-align：center。
大丈夫、私たちはここでやったと思います、それではブラウザで見てみましょう。.
- デモ
- ソースをダウンロード
ホグワーツの魔法の絵を見ているような気がしますか?
最終的な考え
この ボーダー画像 間違いなくCSS3ファミリーの素晴らしい追加です。単純な普通の境界線に限定されることはもうありません。.
そしてこの記事では、内容やこの場合写真の寸法（幅と高さ）を気にせずにイメージフレームを作成する方法を説明しました。ボーダーソースが繰り返し可能または伸縮可能である限り、高さと幅は柔軟にすることができます。.
最後に、あなたがまだ少し困惑しているならば ボーダー画像, より簡単に作成できるようにするために使用できるツールがあります。
