可滚动渐变聊天气泡
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 {
background-color: linear-gradient(red, yellow);
width: 100vw;
height: 100vh;
}
.container {
width: 100%;
height: 100vh;
background-color: white
}
.chatBubble {
background-color: transparent;
border-radius: 4px;
min-width: 50;
padding: 10px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="root">
<div class="container">
<chatBubble>This is a chat bubble</chatBubble>
<chatBubble>This is another chat bubble</chatBubble>
</div>
</div></pre>
</p>
这就是我到目前为止所得到的,试图掩盖它,这样我就可以让白色背景与渐变一起使用。
您可以从
.bubble
中“放置阴影”: