css3 は丸い角をシミュレートします。

今日、偉大な達人 Zhang Xinxu による、角の丸いシミュレーションに関する記事をオンラインで見ました。とても強力で、魔法的で、誤解を招くものだと思いました。それで、みんなで共有して学べるように、すぐに記録しました。

アウトラインの特徴の 1 つは、スペースを占有しないことです。これは非常に強力な属性ですが、一般的にアウトラインは正方形ですが、どうすれば豪華な丸みを帯びたアウトライン効果を実現できるでしょうか。 CSS3 には、角を丸く設定できる border-radius 属性があることは誰もが知っていますが、border および border-radius と組み合わせると、ボックスのサイズが大きくなります。

現時点では、box-shadow と border-radius の組み合わせを使用して、丸い角のアウトライン効果をシミュレートする必要があります。早速、コードから始めましょう:

rrree

実行時の効果は次のとおりです:

Chrome デバッグ ツールで、このボックスのサイズがまだ height: 250px; であることがわかります。

なぜ効果が得られるのでしょうか？ボックスには 1 ピクセルの丸い角があり、ボックスの水平方向の影は 0、垂直方向の影は 0、影のぼかし距離は 0 であるため、ボックスの影は実際には影がないように見えると想像してください。はボックスのサイズと同じですが、4 番目のパラメータは w3c の公式解釈による影のサイズであるため、4 番目の

パラメータはボックスの影を拡大し、ボックスの角が 1px であるため、丸みを帯びた輪郭を模した効果を実現！すごいじゃないですか！