ホームページ > 記事 > ウェブフロントエンド > CSSで波線ボーダーを実装する方法

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

藏色散人オリジナル: 2021-07-22 11:41:486617ブラウズ

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

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

この記事の動作環境: 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 カラーサークルが配置されます (コンテナは次のとおりです)。

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