問題記録 今日はプログレスバーに似た小さなコンポーネントを完成させるつもりでした。プロトタイプは次のようになります(ここでは長さ 200 ピクセル、高さ 28 ピクセルです) 見てみると、とてもシンプルです。数字の1のスタイルはさておき、全体的な親スタイルは、左に半円、右に円弧があるdivです。 私はバカだ、それは間違っている、私はこうだと思った 実際、ブラウザは次のようになります 何かおかしい。右側の角度は設定されているのに、設定されていないように見えるのはなぜでしょうか。8px を 10px に変更して再度試してみましたが、設定されていないのとほとんど変わりません。 8px にすると、顕著な曲率が得られるはずです。すべてを 8px に設定して確認してみましょう。 はい、これは 8px が持つべき曲率です。左を 50px に変更するとなぜ変わるのでしょうか? 50px と関係があるのでしょうか?疑問に思いながら、私はBaiduを見てみました。 Baiduによると、border-radius(w3c)の完全な書き方は次の通りです。 境界線の半径: 1-4 長さ|% / 1-4 長さ|%; 通常は border-radius: 50px と書きますが、実際の完全な書き方は次のようになります。 境界線の半径: 50px 50px 50px 50px / 50px 50px 50px 50px 50px; 「/」の前の 4 つの値はフィレットの水平方向の半径を表し、次の 4 つの値はフィレットの垂直方向の半径を表します。 各順序は、(水平半径:左上、右上、右下、左下)/(垂直半径:左上、右上、右下、左下)に対応します。 水平半径と垂直半径とは何ですか? 水平半径と垂直半径の比率に応じて、角度の曲率を調整できます。2 つの半径が同じ場合は、丸い角になります。 これが、私が通常角を丸く設定する理由です。なぜなら、私は完全な 例えば、border-radius:10px 20px 30px 40px/40px 30px 20px 10px こんな感じです 前回の質問を振り返ってみましょう。 高さ 28px は無視しました。つまり、右側を半円にしたい場合は、水平方向と垂直方向の半径が両方とも 14px であれば問題ないのではないでしょうか。 境界線の半径: 14px 8px 8px 14px / 14px 8px 8px 14px; このように、親スタイルは正しいです。 右側に設定した8pxの丸い角は効果がないようです。左側は元々28pxの高さで、そこに50pxの半径が挿入されているため、50pxに比べて比例的に圧縮されているのかもしれません。計算すると(14 * 8 / 50 = 2.24)となり、これは設定に相当します。 境界線の半径: 14px 2.24px 2.24px 14px / 14px 2.24px 2.24px 14px; 今後スタイルを書くときは注意してください。小さな問題が大きな問題になる可能性があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: JavaScript の構造化代入の一般的なシナリオと例 5 つ
>>: VMWare仮想マシンにCentOS7システムをインストールする詳細な手順
現在、MySQL を学習中です。私は完全な初心者で、Linux についてはあまり知りません。今後の作...
VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...
MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...
ウェブサイトやサービスのパフォーマンスは、データベースの設計(適切な言語開発フレームワークを選択した...
データベースを表示show databases;データベースを作成するDATABASE データベース...
結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
getElementByIdはオブジェクトを取得できませんブラウザがドキュメントを解析するときにはシ...
目次序文XA プロトコルMySQL XA で分散トランザクションを実装する方法序文MySQL が単一...
カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...
この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...