CSS を使用して凹型の丸い角を実現する方法をご存知ですか?-CSSチュートリアル-php.cn

CSS を使用して凹型の丸い角を実現する方法をご存知ですか?

王林

リリース： 2020-11-04 16:37:03

転載

2356 人が閲覧しました

CSS を使用して凹型の丸い角を実現する方法をご存知ですか?

この記事では、放射状グラデーションを使用して、透明な背景を持つ凹型の丸い角を実現します。

(ビデオチュートリアルの推奨: css ビデオチュートリアル)

基本的な線形グラデーション

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red, blue);
}

<div>从左到右的红到蓝渐变</div>

ログイン後にコピー

パーセンテージを追加してグラデーションの範囲を調整します

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red 20%, blue 80%);
}

<div></div>

ログイン後にコピー

グラデーション範囲を重なるまで集中させ、赤と青で区切られた 2 つのカラーブロックを形成します

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red 50%, blue 50%);
}

<div></div>

ログイン後にコピー

色を透明色に設定できます。透明、赤を透明色に変更すると、青だけが表示されます。色はブロックされます

div {
   height: 100px;
   width: 200px;
   background-image: linear-gradient(90deg, transparent 50%, blue 50%);
}

<div></div>

ログイン後にコピー

放射状グラデーションと同様に、グラデーション円も重なるまで狭くなり、円の中心付近の色は透明になります

/* 径向渐变主体 */
.raidal {
    height: 100px;
    width: 100px;
    background:radial-gradient(transparent 50%,blue 50%);
}

<div class=&#39;raidal&#39;></div>

ログイン後にコピー

放射状グラデーションは、半径円の中心位置を設定するので、左上隅に設定し、左上の半径を200pxに調整すると、背景が透明な凹型の丸いコーナーが実現されることがわかります。

適用するときは、疑似要素を使用して設定し、絶対配置を使用して、子と父親の位置を調整し、目的の効果に組み合わせます。

/* 径向渐变主体 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

<div class=&#39;raidal1&#39;></div>

ログイン後にコピー

4 方向に円の中心位置を調整します。ただし、

/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}

/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}

/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
}

<div class=&#39;raidal1&#39;></div>
<div class=&#39;raidal2&#39;></div>
<div class=&#39;raidal3&#39;></div>
<div class=&#39;raidal4&#39;></div>

ログイン後にコピー

同様に、角をあまり丸くしたくない場合は、角を楕円にすることもできます。半径の 2 つのパラメータを設定します。それは楕円です。

放射状グラデーションには、自分で調整できるパラメータが多数あり、さまざまな奇妙な形状が表示される可能性がありますが、ここでは説明しません。比較的に、凹型の丸い角で十分です

/* 左上 */
.ellipse {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}

<div class=&#39;ellipse&#39;></div>

ログイン後にコピー

関連する推奨事項:CSS チュートリアル

以上がCSS を使用して凹型の丸い角を実現する方法をご存知ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。