/* ============================================================
相册边框样式(全局)
- 前台 PhotoGallery 按 page.borderStyle 套用
- 后台 AdminEditor 预览复用同一套类
结构约定:
gf-frame 负责定位与裁切,gf-xxx 负责边框/卡纸/投影
============================================================ */
.gf-frame {
position: relative;
background: #fff;
overflow: hidden;
}
.gf-frame > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 无边框 */
.gf-none {
padding: 0;
border: 0;
box-shadow: none;
border-radius: 0;
background: transparent;
}
/* 细金线 */
.gf-thin {
padding: 0;
border: 1px solid #cdb89c;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(120, 90, 60, 0.08);
background: #fff;
}
/* 白卡纸(经典裱框) */
.gf-mat {
padding: 8px;
border-radius: 2px;
box-shadow: 0 6px 20px rgba(120, 90, 60, 0.12);
background: #fff;
}
/* 柔圆角 */
.gf-rounded {
padding: 0;
border: 1px solid rgba(168, 140, 107, 0.4);
border-radius: 20px;
box-shadow: 0 8px 24px rgba(120, 90, 60, 0.1);
background: #fff;
}
/* 双线框 */
.gf-double {
padding: 6px;
border: 3px double #b89a78;
border-radius: 3px;
box-shadow: 0 4px 16px rgba(120, 90, 60, 0.1);
background: #fff;
}
/* 古典金框(外白 + 金线双层) */
.gf-gold {
padding: 7px;
border: 2px solid #c9a978;
border-radius: 3px;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e7d6bb, 0 8px 22px rgba(120, 90, 60, 0.12);
background: #fff;
}