スクロール可能なグラデーション チャット バブル
<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>
