css 如何实现一个带阴影的气泡对话框
warning:
这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。
在CSS中，可以使用box-shadow属性为气泡对话框添加阴影。以下是实现一个带阴影的气泡对话框的示例代码：
HTML:
<div class="bubble">
<p>这是一段文本，展示如何创建带阴影的气泡对话框。</p>
</div>CSS:
.bubble {
position: relative;
background-color: #f2f2f2;
border-radius: 10px;
padding: 20px;
width: 200px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}
.bubble::after {
content: "";
position: absolute;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent #f2f2f2;
top: 50%;
left: -10px; /* 调整这个值可以改变阴影与气泡的位置关系 */
margin-top: -10px;
}这段代码创建了一个带有圆角和阴影的气泡对话框，并且使用伪元素::after来创建一个三角形的箭头，指向气泡的方向。可以根据需要调整.bubble的宽度、内边距、边框半径和阴影大小。
评论已关闭