以下に示すように
4 つの円を長方形の 4 つの頂点とみなします。点線は境界線スタイルの破線を使用して実装できます。
次に、この長方形のようにページ全体を 1 つずつ垂直に積み重ねます。各長方形内に 2 つの頂点が配置され、長方形の左上隅と右上隅に絶対に配置されます。
https://codepen.io/straybugs/…
純粋な水平方向と垂直方向の進行関係は存在せず、非常にぎこちなく見えます。 各レイヤー間の関係は、ポインタではなく、以下のステップ数を見て関連付けられます。 背景が暗いプロセスの説明も 2 つありますが、目的がわかりません。 全体的なエクスペリエンスが低すぎ、特にプロセスが狭すぎて、ユーザーの注意に影響を与えます。
背景画像キャンバス疑似クラス
幅が固定なら、背景に線を投げ込むかもしれません、ハハハ
width || height: calc は線幅を動的に計算します。この黒い線は疑似要素、::before ::after を使用できます。canvas は少しやりすぎだと思いますが、CSS で実現できます。 。
1. 写真でカットするのも一つの方法です。 2. または、レイアウトの追加の p を位置決めに使用し、border: 1px 破線 #000 をスタイルに使用します。 。それでおしまい。 3. CSS疑似クラスを使用して実装します。
IE8以降のブラウザの場合は疑似クラスを使用して実装してください
以前のブラウザと互換性がある場合は、p を使用して wave をシミュレートすることしかできません。これは個人のニーズによって異なります。
キャンバスを使用する生徒をサポートします。一歩下がって、写真を使用して写真を切り取ることができます。
最初に ul li float を使用してフローティングし、次に class.bg{position:relitive} を記述し、2 つの疑似クラス、つまり水平線と垂直線を記述し、設計草案に従ってそれらを配置するだけです
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
4 つの円を長方形の 4 つの頂点とみなします。点線は境界線スタイルの破線を使用して実装できます。
次に、この長方形のようにページ全体を 1 つずつ垂直に積み重ねます。各長方形内に 2 つの頂点が配置され、長方形の左上隅と右上隅に絶対に配置されます。
https://codepen.io/straybugs/…
純粋な水平方向と垂直方向の進行関係は存在せず、非常にぎこちなく見えます。
各レイヤー間の関係は、ポインタではなく、以下のステップ数を見て関連付けられます。
背景が暗いプロセスの説明も 2 つありますが、目的がわかりません。
全体的なエクスペリエンスが低すぎ、特にプロセスが狭すぎて、ユーザーの注意に影響を与えます。
背景画像
キャンバス
疑似クラス
幅が固定なら、背景に線を投げ込むかもしれません、ハハハ
width || height: calc は線幅を動的に計算します。この黒い線は疑似要素、::before ::after を使用できます。canvas は少しやりすぎだと思いますが、CSS で実現できます。 。
1. 写真でカットするのも一つの方法です。
2. または、レイアウトの追加の p を位置決めに使用し、border: 1px 破線 #000 をスタイルに使用します。 。それでおしまい。
3. CSS疑似クラスを使用して実装します。
IE8以降のブラウザの場合は疑似クラスを使用して実装してください
リーリー以前のブラウザと互換性がある場合は、p を使用して wave をシミュレートすることしかできません。これは個人のニーズによって異なります。
キャンバスを使用する生徒をサポートします。一歩下がって、写真を使用して写真を切り取ることができます。
最初に ul li float を使用してフローティングし、次に class.bg{position:relitive} を記述し、2 つの疑似クラス、つまり水平線と垂直線を記述し、設計草案に従ってそれらを配置するだけです