ホームページ > 記事 > ウェブフロントエンド > CSS3で凹型の角丸を実現する方法を詳しく解説

CSS3で凹型の角丸を実現する方法を詳しく解説

小云云オリジナル: 2017-12-19 11:28:323669ブラウズ

誰もが丸い角、境界線の半径、凹型の丸い角を実現する方法を実行できる必要がありますか?この記事では、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で凹型の角丸を実現する方法を詳しく解説

関連記事