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の中心位置を調整するだけです。同様に、角を丸くしたくない場合は、半径の 2 つのパラメータを楕円に設定することもできます。

 /* 左上 */ 
.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>

放射状グラデーションには、自分で調整できるパラメータが多数ありますが、ここでは説明しません。比較的、凹型の丸い角で十分です【関連する推奨事項】

1.

CSS オンライン ビデオ チュートリアル

2. php.cn Dugu Jiijian (2)-css ビデオチュートリアル

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