コード表示: CSS3 を使用して凹型の丸い角を実現する

この記事では、CSS3で凹型の角丸を実現するためのサンプルコードを中心に紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう

角を丸くする、誰でもできるはずです、境界線の半径、凹型の丸い角を実現するにはどうすればよいですか?

白い丸いボックスを使用して正方形のボックスの大部分を覆うことができますが、これは不透明なので、背景が変更されると、カバーするボックスの色を変更する必要があり、背景がグラデーションになるため、より面倒です。変更したり、背景を変更したり、写真などを変更するのは簡単ではなく、この方法には制限があります。 はっきり言って、覆われた部分が不透明になった後は、適応性が強くありません。

ここでは、上記の問題を解決できる、放射状グラデーションを使用して実装された凹面フィレットを紹介します。 CSS を使用して、背景が透明な凹型フィレットを生成できます。

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

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</p>

2. グラデーション範囲を調整するためにパーセンテージを追加します

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

3. 赤で区切られた 2 つのカラー ブロックを形成します。

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

4. 色を透明に設定すると、青色のブロックのみが表示されます。

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

<p></p>

5. 放射状のグラデーションも同様に考え、グラデーションの円も重なるまで縮小し、円の中心付近の色を透明にします。

 /* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <p class=&#39;raidal&#39;></p>

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

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

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

7。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%);
} 
<p class=&#39;raidal1&#39;></p> 
<p class=&#39;raidal2&#39;></p>
 <p class=&#39;raidal3&#39;></p>
 <p class=&#39;raidal4&#39;></p>

8. 同様に、角を丸くしたくない場合は、半径を楕円にすることもできます。

 /* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <p class=&#39;ellipse&#39;></p>

放射状グラデーションには、自分で調整できるパラメータがたくさんありますが、ここでは説明しません。比較的、凹型の丸い角で十分です

以上がコード表示: CSS3 を使用して凹型の丸い角を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。