CSS3 のみを使用してインセット境界半径を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 のみを使用してインセット境界半径を作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-02 21:03:10

オリジナル

441 人が閲覧しました

How Can I Create Inset Border-Radius Using Only CSS3?

CSS3 での境界半径の挿入

CSS3 では、角が外側ではなく内側に湾曲する境界半径の挿入を実現できます。画像を使わずにチャレンジしてみてください。ただし、CSS3 グラデーションを利用する賢い解決策があります。

Lea Verou の独創的なアプローチには、曲線を使用した一連の透明なグラデーションを作成し、境界線の半径が挿入されているような錯覚を作り出すことが含まれています。これらのグラデーションを正確に配置することで、目的の角丸効果を実現できます。

以下に示すように、彼女の CSS コードは、目的の枠線半径を持つ要素のカスタムクラスを定義します。

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

ログイン後にコピー

このクラスを要素に適用すると、ボーダー半径が挿入された要素が作成されます。この手法は rgba とグラデーションのサポートに依存しており、漸進的な強化戦略であることに注意することが重要です。古いブラウザーまたはグラデーションをサポートしていないブラウザーの場合は、サポートを提供するために画像ベースのフォールバックをお勧めします。

以上がCSS3 のみを使用してインセット境界半径を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。