dialog.lightbox {
    border: none;
    overflow : hidden;
    padding: 0;
    background-color: transparent; 
    -webkit-animation: 加载 0.3s ease-out;
    animation: 加载 0.3s ease-out;
}

dialog.lightbox div {
    position: relative; /* 为图片容器设置相对定位，以便绝对定位按钮*/
    display: flex;
    justify-Content: center;
    align-items: center;/* 图片容器.style.alignItems = 'center'; */
    height: 105%;
    border: none;
}

dialog.lightbox::-webkit-backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

dialog.lightbox::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);/* 模糊原窗体做背景 */
}

dialog.lightbox img {
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    overflow: hidden;
    height: 100%;
    width: 100%;
    max-width: 90vw;
    max-width: 90dvw;
    max-height: 90vh;
    max-height: 90dvh;
    border: none;
    border-radius: 6px;
    /* -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E"); */
}

.lightbox-text {
    background-color: rgba(0, 0, 0, 0.6); /* 文本背景，半透明黑色，根据设计调整 */
    color: white; 
    margin:0;
    text-align: center; 
}

@-webkit-keyframes 加载 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes 加载 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}