一、一般对话框样式
外层:
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,.4)
内层:
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
background-color: #fff;
二、css模拟带三角的对话框样式
模拟总结:
1、两个div边框颜色一样、背景颜色一样
2、三角div只给两个border+旋转+定位
.box{
position:relative;
width:100px;
height:100px;
border: 1px solid #d1f;
background: #ccc;
}
.triang{
position:absolute;
top:-4px;
left: 8px;
width: 8px;
height: 8px;
border-top: 1px solid #d1f;
border-left: 1px solid #d1f;
background: #ccc;
transform: rotate(45deg);
}