前端知识笔记（二十）———简易弹窗制作

弹窗名{
   /* 弹窗位置自行调整 */
  position: fixed;
  top: 20vh;
  left: 90vh;
  /* 颜色自行调整 */
  background-color: #056774;
  /* 弹窗宽高自行调整 */
  width: 14vw;
  height: 8vh;
  /* 弹窗内容居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 弹窗内容样式自行调整 */
  color: #ffffff;
  font-weight: 800;
  /* 弹窗样式美化 */
  border-radius: 1vh;
  border: 0.2vh #ffffff solid;
  box-shadow: 1vh 1vh 10vh #011B29 inset;
  /* 弹窗显示方式 */
  opacity: 0;
  transition: 0.3s;
}