如何向仅CSS语音气泡添加边框
我使用下面的代码来实现纯css语音气泡,但是我仍然无法为整个气泡添加边框,包括下方的箭头 HTML如何向仅CSS语音气泡添加边框,css,Css,我使用下面的代码来实现纯css语音气泡,但是我仍然无法为整个气泡添加边框,包括下方的箭头 HTML <div class="bubble">Welcome</div> 结果 如果我添加了边框代码border:2px solid#493A34在课堂上.bubble 结果 问题 如何为箭头添加边框?~有什么想法吗 编辑:这里是应用了框阴影的示例。有点小技巧,但您可以添加一个充当边框的框阴影(意思是,模糊设置为0): 。语音气泡{ /* ... */ /*2px=边框宽度
<div class="bubble">Welcome</div>
结果
如果我添加了边框代码border:2px solid#493A34代码>在课堂上.bubble
结果
问题
如何为箭头添加边框?~有什么想法吗
编辑:这里是应用了框阴影的示例。有点小技巧,但您可以添加一个充当边框的框阴影(意思是,模糊
设置为0
):
。语音气泡{
/* ... */
/*2px=边框宽度#333=边框颜色*/
-网络工具包盒阴影:0 2px#333;
盒影:02px#333;
}
您可以使用:after psudo元素制作稍大一点的棕色箭头,并将其放置在较小的绿色箭头(使用:before制作)后面,然后向下2倍以创建边框效果
这是小提琴:
和css:
.bubble {
border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;
}
.bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}
我想影子会在气泡上。或者气泡边界将位于箭头上方。您仍然无法获得该效果!提示仍然无边界出现…花了数小时,在其他地方找到了许多答案,但所有答案都不正确,但您的答案非常完美:)非常感谢,我会仔细研究你的创意。
.bubble {
border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;
}
.bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}