css3 border-image_html/css_WEB-ITnose を簡単に始める

使ったことがあるかどうかに関係なく、css2.1 と比較して CSS3 には多くの新しい点があるため、これを選択する必要があるからです。比較的理解しにくいです。では、それは一体何で、どのように使用し、何に注意すればよいのでしょうか？これに関する本や記事もありますが、読んだことがあるが理解できない、何が起こっているのかを感じた場合は、この記事が役立つことを願っています。常識では遊びませんよ~

まず最初に言いたいのは、先入観を持って行き詰まってしまわないようにしてください。そうしないと、画像の境界線は線形境界線を使用する場合とは異なります。この考えを変える必要があります。線状の境界線を使用する場合は、「境界線の幅」、「種類」、「色」を設定するだけです。画像を使用する場合は枠線が出てきます。これには独自のルールがあるので、頭を整理してよく学ぶことを忘れてください（この文は武道映画でよく使われるようです）〜

マスターする必要があるのは 2 つだけです:

1. 写真をトリミングする方法

2. トリミング後にどのような操作を行う必要があるのですか?

まず最初のポイントについて話しましょう

これがあまりにも面倒で奥深いと思わないでください。「正方形を9つに切るのに何本のナイフを使うことができますか?」または「何ができますか?」という知的なゲームを誰もが行ったことがあるでしょう。数本のナイフで好きなだけ切ります」など。写真をトリミングすることも同じことです。すぐに親しみを感じませんか?選択した絵を縦横2本のナイフを使って9分割するのですが、これは多くの資料で紹介されている「9マス」のことです。カットの数は 4 であることに注意してください。この数字はよく知られています。マージン、パディング、ボーダーなどはすべて、上、右、下、左の順に測定されます。どうですか？ご想像のとおり、測定は端から内側に向​​かって行われます。つまり、上端は下を指し、右端は左を指します。他のルールと同様に、1 つ、2 つ、または 3 つと省略して書くこともできます。注意事項は以下に記載されています。 ~

2番目のポイントについて話しましょう

「測り方や切り方を言ったのはわかるけど、頭が大きすぎるのに、一体何をしているの？」と言う人もいるかもしれません。枠線を使っているだけですが、とても複雑です。信じてください、それは複雑ではありません。トリミング後に何をすべきかをよりよく説明するために、これも w3c チュートリアル Web サイトからの写真です

まず、9 つに切り分けられた大まかな図を描いてみましょう。はい、それでは次に何をしましょうか？はは、ただの冗談さ。

画像の境界線の描画は最後のステップに入り、これは最も重要なステップでもあります:

覚えておいてください、四隅は固定されています。つまり、この画像を境界線として適用すると、四隅は固定されます。 (サイズを除いて) それを制御することはできません。真ん中については、ダモ兄弟も記事で「盲点」と呼んでいましたが、削除してください。黄色いダイヤモンドは 4 つだけ残っています。次に、何が起こるかについて話しましょう。このような境界線を要素に追加することは、画像を見つけて必要な領域をクリックし、中央をくり抜き、それを四方に広げることと同じです。

フォーマットを見てみましょう:

border-image:url(画像パス) トリミングサイズ トリミング後の表示方法 (上の写真では、4つの黄色いひし形の配置です)

配置は3つあります: ラウンド、リピートとストレッチの効果をそれぞれ見てみましょう

round(tile)

.box{border-image:url("../images/border.png") 27round;border-width: 27px;幅: 800px;高さ:100px;背景:#0CC;}

効果

repeat(repeat)

.box{border-image:url("../images/border.png") 27 repeat;border- width:27px;width:800px;height:100px;background:#0CC;}

効果

stretch(ストレッチ)

.box{border-image:url("../images/ border.png ") 27stretch;border-width:27px;width:800px;height:100px;background:#0CC;}

Effect

注: IE 開発者プラットフォームは別の方法も提供しています: によると、スペーステストしてみましたが、繰り返しても違いはありませんでした。新しい発見があれば、ぜひ共有してください。使用される背景画像または設定されたコンピューターのデスクトップ画像は、フラットに興味があるでしょう。広げたり伸ばしたりすることに慣れているため、理解するのは難しくありません。今回は予防策についてお話します。

この短いコードにはいくつの謎が隠されていますか? (これはただ作っているだけです~)

1. 画像のパスは絶対パスでも相対パスでも構いません

2. トリミング値が 27 であることに注目してください。これは、画像の幅と高さが両方とも 81 であるためです。27 を使用すると、辺を 3 つの等しい部分に分割し、3 つの完全なひし形を切り取ることができます。もちろん、元の画像サイズの範囲内で使用することは影響しません。また、効果を確認するために 0 または 81 を試してみることもできます。 、単位はありません、はい、デフォルトの単位があります。単に「px」です。単位を持ってくるのは間違いです。 ！

3. 表示モードを使用する場合は、上記のように 1 つだけ書くことも、2 つ書くこともできますが、3 つや 4 つ書くことはできません。いいえ！ぐるぐる繰り返すストレッチなどがうまくいかないだけでなく、ぐるぐる繰り返しぐるぐる繰り返しぐるぐる繰り返すといった一見合理的なこともうまくいきません。 ！もちろん、デフォルト値はストレッチです。

ストレッチラウンドを組み合わせた効果を与えます。前のものは上下を制御し、後ろのものは左右を制御することに注意してください。

4. 境界線の幅、まずこれを設定する必要があります。そうしないと応答がありません。また、境界線の幅は元の画像とは関係ありません、元の画像です。画像は選択するためのものです、設定した境界線の幅が選択した部分より大きいか小さいかは問題ではありません。選択した画像の部分は比例して拡大縮小されます。正常に表示するには

基本的なことを注意してください。 練習中に問題がある場合は、まず確認してください。単語のスペルなどの低レベルの間違いをしないように注意してください。

実際には、まだ少し混乱しますよね?

1. リピートとラウンドはなぜ似ていますか?

はい、この 2 人の兄弟は非常に似ています。また、繰り返しは、繰り返しのタスクを実行するだけであるため、両端に欠陥が残ると考えられます。中央から両端まで繰り返し、round は繰り返しの作業を行うだけでなく、全体の幅と画像の選択した部分の幅のバランスをとり、画像を完全にタイリングすることができます。

二番目に、なぜ画像を選択し、サイズを制御し、水平方向と垂直方向の表示方法を制御できないのでしょうか?

それが本当に当てはまるのであれば、何も問題はありませんが、このアプローチにより、より興味深いことが実現できます。さらに、良い境界線画像を使用するには、2 つのことを行う必要があります。 2 つ目は、画像を希望どおりにトリミングすることです。これにより柔軟性が高まります。好奇心と創造性が十分であれば、この機能は思っているよりも強力です。上記は単なる例です。必要に応じて、4 つの辺と角を任意の画像に置き換えることができます。 ～例えば上記の例で、ひし形をすべて赤か黄色にすると、四辺が全く同じ絵枠が出来上がりますので、とても簡単です！ ~

ここまで述べたところで、ボーダーを作成するために必要なものは以上です

border-image: url("image path") トリミングサイズ/ボーダー幅/ボーダー画像 境界線を越えた金額を表示する方法

これを見ると、なぜ先ほどよりも 2 つ多いのかと思われるでしょう。はい、これはすべてを 1 つのルールに省略しており、次のような形式に従う必要があります。 / 「それ

は削除できません。削除しないと、ルール全体が再び無効になってしまいます。では、境界線の画像が境界線を超えるとはどういう意味ですか?設定した境界画像は

で定義された固定幅のスペースを占めます。デフォルトの超過値は 0 です。以下に、超過 5px の外観を示します。

.box{border-image:url("../images/border.png") 27 /30px /5px ストレッチラウンド;

違いがわかりますか?常識として、距離を制御するために使用されるこのようなものは、プラス

になる可能性がありますか?申し訳ありませんが、これは実際には存在しません。 ~ただし、上、右、下、左の規則に従うことも、省略することもできます。

要約すると、

border-image: url("image path") Crop size/border width;

この組み合わせは必須です。その他はケーキのアイシングとして使用されます。

ここまでお話しましたが、もうお分かりいただけたでしょうか？それでもわからない場合は、上記の4つの注意事項を間違えなければ、基本的には大丈夫です。ダモ兄弟の記事 http://www.w3cplus.com/content/css3-border-image を添付します。個人的には、最初に基本的な効果を実現できれば、より多くの報酬と驚きが得られると思います。そうでない場合は、そうなる可能性があります。めまい。

IE デベロッパー センター関連コンテンツ http://msdn.microsoft.com/library/ie/dn384064.aspx