CSS マジック ホール: 国境を取り戻す -- より広範な夢想_html/css_WEB-ITnose

前書き

CSS3 が border-radius 属性を導入したとき、私たちは角丸をシミュレートするために追加の要素を追加する必要がなくなったと思っていましたが、border-radius には水平半径と垂直半径もあることがわかりました。すると、border-top-left/right-radius の水平方向の半径の合計が要素の幅よりも大きい場合、実際の値は要素の幅に比例して配分されることがわかりました。しかし、「国境を本当に理解しているのか？」と尋ねてください。この連載では、一見興味のなさそうな境界線をもう少し深く掘り下げていきます！
「CSS マジック ホール: 境界を取り戻す - 境界を解体する」
「CSS マジック ホール: 境界を取り戻す - 境界線としての絵」
「CSS マジック ホール: 境界を取り戻す - 丸い角だけではない」
「CSS マジック ホール: 再発見」 Border - より広い空想」

Border-Radius が Mr. と出会うとき、Border-Image ではコンテナ サイズの下限なしで角丸効果を完璧に実現できるのに、なぜ Border-Radius を導入するのでしょうか?エージェントは非常にシンプルで、スライディング ドアでも Border-Image テクノロジーでも、丸い角の基礎として画像を使用しますが、Border-Radius は数学で幾何学的図形を使用して丸い角を描画します。言い換えれば、私たちが操作する幾何学式の未知の変数や特定の描画操作は、私たちがデザイナーに助けを求めるのではなく、レンダリング エンジンによって処理されます。したがって、Border-Radius を未知の変数に関連する他の属性と組み合わせることで、変化は無限に広がります。

Border-Radius が border-style と出会うとき

<style type="text/css">.target{  width: 0;  height: 0;  border: 60px double #F00;  border-radius: 50%;}</style><div class="target"></div>

Border-Radius が Transition と出会うとき

border-corner-shape によるさらに変化するコーナー

border-corner-shape が今後の機能として、私たちに次の可能性を与えますよりシェイプされたコーナー。詳細については、border-corner-shape

border-corner-shape: カーブ

curve:
デフォルト値、角丸bevel:
実際に垂直に沿ってカットする角度を参照してください。交線と線を結ぶ 直角に落とすノッチ:
溝スクープ:
凹型の角丸 まとめ

ありがとうございます

《The Humble Border-Radius》