スクロール可能なグラデーション チャット バブル
P粉197639753
2023-09-01 11:52:18
<p>次の例に示すように、下のグラデーションでスクロールするとグラデーションが変化するチャット バブルを備えた白いコンテナが必要です。</p>
<p><code>chatBubble</code> の背後にある <code>.container</code> 部分を透明にして、<code>.root</code> の背景が見えるようにしてみました。 </p>
<p>
<pre class="brush:css;toolbar:false;">.root {
背景色: 線形グラデーション(赤、黄);
幅: 100vw;
高さ: 100vh;
}
。容器 {
幅: 100%;
高さ: 100vh;
背景色: 白
}
.chatバブル {
背景色: 透明;
境界半径: 4px;
最小幅: 50;
パディング: 10px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="root">
<div class="コンテナ">
<chatBubble>これはチャット バブルです</chatBubble>
<chatBubble>これは別のチャット バブルです</chatBubble>
</div>
</div></pre>
</p>
これは私がこれまでのところ得たもので、グラデーションに合わせて白い背景を持てるようにマスクしようとしています。
.bubble
から「影の配置」ができます: