CSSで波線ボーダーを実装する方法

CSS で波状の境界線を実装する方法: 最初に HTML サンプル ファイルを作成し、次に p タグを作成し、最後に放射状グラデーション「radial-gradient」を使用して波状の境界線を実装します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS で波状の境界線を実装するにはどうすればよいですか?

CSS3 放射状グラデーション 波状の境界線と内側の面取りを実現するための放射状グラデーション法

序文

私が上司から写真を渡されました。クーポン画像（下図）を見て、波状の枠線と内側の面取りがCSSでは書けないことに気づき、上司に説明してUIの切り抜きをお願いしたところ、上司は「CSS3ならできる」と返答。そうですね、上司たちはそれが実現できると言っています。急いでグー兄弟をドゥニアンに頼んでみてはいかがでしょうか。

内部面取りを実装します

上記のコードを使用して、コードのスタイルを説明します

<p class="radial-gradient"></p>
<style>
.radial-gradient {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
           radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}
</style>

。 Radial-gradient 説明する必要はありません。CSS をある程度知っている人なら誰でも知っているでしょう。重要なのは .radial-gradient:after スタイルです。

放射状グラデーション (右上の円、#fff、#fff 10px、透明 11px) スタイルの目的を説明することに重点を置きます。

circleは円形のグラデーションを表しており、簡単に言うと円を描くことです。円を描くには原点を知る必要があります。

右上の丸 右上の丸内の右上が原点位置です。ここで、原点位置はコンテナの座標を基準としています。 Right はコンテナーの右端を意味し、top はコンテナーの上面、つまり右上隅を意味します。右上の

#丸 #fff、#fff 10px、後ろの透明 11px は、原点から始まるさまざまな色のグラデーションの長さです。

コード #fff、#fff 10px、透明 11px 最初の #fff は原点が #fff カラーであることを意味し、#fff 10px は原点半径 10px からの距離がすべて #fff カラー、透明 11px であることを意味します原点から10pxから11pxまでは透明、他の色は設定していないので原点から11px以降は透明という意味です。

概要 radio-gradient(circle at right top, #fff, #fff 10px, transparent 11px) は、コンテナの右上隅を次のように円を描くことです。半径 10px の原点。内側の色は #fff で、半径 10px を超える色は透明です。

これは右上隅に内側の面取りを形成します

radial-gradient(右下の円、#fff、#fff 10px、透明な 11px) と同じ; 説明はしません。

波状の境界線を実装します

コードの上に CSS スタイルを追加します

<style>
.radial-gradient:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
    background-size: 10px 10px;
}
</style>

background:radial-gradient(circle, #fff, #fff 4px, 透明 5px); ここでは右上に単語がありません, これは原点がコンテナの中心にあることを意味します. #fff, #fff 4px, 透明 5px は 4px の半径内の色が #fff color であることを意味します、半径 4px を超える色は透明色になります。このように、コンテナの中心に直径 8px の #fff カラー サークルが配置されます (コンテナは次のとおりです)。

(背景の青色はデモンストレーション効果用です)

背景サイズを追加: 10px 10px; 複数の直径を実現できるように、背景サイズを幅 10 ピクセル、高さ 10 ピクセルに設定します。 #fff カラーの 8 ピクセルの円。

(背景の青色はデモンストレーション効果用です)

left: -5px; :after の半分だけが .radial-gradient コンテナ内に収まるように、左に 5px オフセットします。

最後にレンダリングを添付します

##概要

内部面取りを実現するには、実際には # で円を描きます。 fff カラー。波状の境界線を実現するには、円の 4 分の 1 だけがコンテナ内にあります。実際には、#fff カラーの円を複数描画し、円の半分だけがコンテナ内にあります。

[推奨される学習:

css ビデオ チュートリアル

]

以上がCSSで波線ボーダーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。