html 下拉框 小三角,CSS实现带小三角的消息提示框效果.html
.btn_exc button {border: 1px solid #333333;font-family: PingFang-SC-Regular;font-size: 14px;color: #333333;height: 30px;text-align: center;border-radius: 6px;background: #FFF;}.btn_exc .tips:after {po
.btn_exc button {
border: 1px solid #333333;
font-family: PingFang-SC-Regular;
font-size: 14px;
color: #333333;
height: 30px;
text-align: center;
border-radius: 6px;
background: #FFF;
}
.btn_exc .tips:after {
position: absolute;
display: inline-block;
top: -7px;
left: 40px;
width: 0;
height: 0px;
content: '';
border-style: solid;
border-width: 7px;
border-color: #fff;
transform: rotate(-45deg);
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.10);
}
.btn_exc .tips {
display: none;
position: absolute;
z-index: 100;
width: 600px;
left: 5px;
transform: translateY(5px);
-webkit-transform: translateY(5px);
text-align: justify;
background: #ffffff;
border-radius: 6px;
padding: 0px 15px 15px 15px;
color: #666666;
font-family: PingFang-SC-Regular;
font-size: 14px;
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.10);
margin-top: 10px;
}
.btn_exc .tips .one {
height: 15px;
width: 50px;
left: 30px;
background: #ffffff;
position: absolute;
z-index: 111;
}
点我弹窗
带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果
function open_tips() {
document.getElementById('tips').style.display = 'block';
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)