Rounded border-radius プロパティについて説明しますか? (コードの紹介)-htmlチュートリアル-php.cn

Rounded border-radius プロパティについて説明しますか? (コードの紹介)

PHPz

リリース： 2018-10-23 10:22:57

転載

2110 人が閲覧しました

この記事では、角丸の border-radius 属性について説明します。 (コードの紹介) には特定の参考値があり、困っている友達はそれを参照できます

多くの Web サイトで角丸の効果がよく見られます。ユーザーエクスペリエンスと心理学の観点から見ると、角が丸い効果はより美しく寛大であることがよくあります。

CSS2.1 では、要素の角を丸くするのは頭の痛い問題です。従来の方法では、背景画像を使用してこれを実現していましたが、作成が比較的面倒でした。しかし、CSS3 での border-radius 属性の登場により、角丸効果を実現するのが難しいという問題は完全に解決されました。

さらに、フロントエンド開発や Web デザインでは、「できるだけ少ない画像を使用する」という原則が守られています。CSS で効果が得られる場合は、画像を使用しないようにします。画像は http リクエストをトリガーする必要があり、送信量が多いため、Web ページの読み込みパフォーマンスに影響します。チュートリアル記事の下部にあるこれらの小さなアイコンと同様に、これらはすべて、画像の代わりに「カスタムの小さなアイコンフォント」を使用して実装されています。 CSS 上級チュートリアルでは、「小さなアイコンフォントをカスタマイズする」テクニックについて詳しく説明します。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-radius属性</title>
    <style type="text/css">
    #div1
    {
        width:100px;
        height:50px;
        border:1px solid gray;
        border-radius:10px;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです: