[分享]css3带阴影弹出窗口

在当前的网页设计中，弹出窗口成为用户界面交互的重要组成部分。为了让弹出窗口更加醒目美观，我们可以使用CSS3技术为其添加阴影效果。.popup { display: none; : fixed; to...

在当前的网页设计中，弹出窗口成为用户界面交互的重要组成部分。为了让弹出窗口更加醒目美观，我们可以使用CSS3技术为其添加阴影效果。

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    z-index: 999;
}

.popup.show {
    display: block;
} 

以上是弹出窗口的样式代码，其中popup为弹出窗口的类名。其中，display: none;的作用是让弹出窗口默认不可见，当需要弹出窗口时，通过JS动态添加show类名来显示弹出窗口。

position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);的作用是让弹出窗口在屏幕中央水平垂直居中显示。border-radius: 5px;用来设置弹出窗口的圆角效果。

box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);则为弹出窗口添加了阴影效果。其中，2px值分别表示阴影偏移量的水平和垂直方向，10px表示阴影的模糊半径。rgba(0, 0, 0, 0.3)则为阴影指定了颜色和透明度。

最后，background-color: #fff;为弹出窗口设置了背景颜色，z-index: 999;则是设置了弹出窗口在层级上的优先级，确保在页面中其他元素上方显示。