:modal伪类与模态层的样式控制实例页面

展示

代码

• HTML：

  <dialog id="dialog">我是弹框内容，看看边框和背景色吧~</dialog>
  <button onclick="dialog.showModal();">点击我显示弹框</button>
  <button onclick="dialog.show()">普通显示</button>

• CSS：

  :modal {
      border: 5px solid darkblue;
      background-color: skyblue;
      box-shadow: 4px 4px 8px #0008;
  }