CSSの興味深い境界線

border

簡単に言うと、これは私たちがよく使う境界線です。非常に基本的な使用法は次のとおりです。

border: 1px solid black;
// 等价于
border-width: 1px;
border-style: solid;
border-color: black;

デモの効果は次のとおりです:

もちろん、次のような多くの奇妙な境界線タイプを定義することもできます。角丸（半径）、互換性があまり良くないかもしれません）、楕円（実際、楕円を理解していれば、自由に境界線を引くことができます）。

border 1px solid black;
border-radius: 50%;

border-top,-right,-bottom,-left

たくさんの興味深いデモを読んだ後、ボーダーを本当に理解できましたか?

私は最近、境界線についての深い理解を与えてくれる興味深い CSS スタイルに出会いました。通常、境界線を使用するときは、基本的に境界線の幅を 1 ピクセルに設定しますが、境界線と要素の幅をより大きな値に変更すると、問題が発生します。

border: 20px solid gray;

そして、境界線は上、右、下、左の値を個別に設定できます:

border: 20px solid gray;
border-top-width: 40px;
border-left-width: 40px;

境界線と境界線の接合点を判断するにはどうすればよいですか?

これを理解することは非常に重要です。この問題が見つかった場合は、次のような興味深いことが起こります:

border: 20px solid;
border-top-color: black;
border-right-color: red;
border-bottom-color: gray;
border-left-color: blue;

実際には、境界線を区切るのは内側の頂点と外側の頂点を結ぶ線です。要素を分割します 幅と高さの両方が 0 に設定され、半径が追加されます:

width: 0;
height: 0;
border-radius: 50%;

その前に、border-radius の原理も理解しておく必要があります

border を使用して矢印を実装します

これでわかりました。以下のようなダイアログ ボックスでよく見られる矢印を実装できます:

これは、CSS の透明性を利用して実現する必要があります。たとえば、右矢印が必要です。を参照してください。上記の例では、幅と高さが 0 の場合、対応する境界線のサイズは 15px、0px、15px、30px です。まず下の例を見てください

border-width: 15px 0px 15px 30px;
border-color: black gray;
border-style: solid;

このとき、border-top の色を設定する必要がありますそして、border-bottomを透明にすると、

border-color: transparent gray;

次に、他の3つの矢印の角度も同じ方法でデザインできます:

まとめ

この記事を読んで、ボーダーの機能は非常に強力だと思いますか? 実際、私たちの一般的なバブルや図形の一部はボーダーで実現できます。笑、私は写真を使う学生を本当に軽蔑しています。相互励まし合い。