带渐变边框、渐变阴影与Glassmorphism效果的卡片样式问题求助

要实现仅边框显示旋转渐变、同时保留玻璃态效果和模糊阴影，关键是让伪元素的渐变仅渲染边框区域，避免透到卡片内部。修改后的代码如下：

/* Card Design */

@property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

.card {
    position: relative;
    width: 300px;
    min-height: 300px;
    border-radius: 10px;
    /* 玻璃态样式 */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    /* 可选：添加内边距避免内容贴边 */
    padding: 20px;
}

.card::before,
.card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-image: conic-gradient(
        from var(--angle), #ea2dd8, #001bf1, #ea2dd8
    );
    animation: autoRotate 2s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.card::before {
    /* 核心：用mask裁剪出仅边框区域显示渐变 */
    mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    padding: 5px; /* 边框宽度 */
}

.card::after {
    filter: blur(30px);
    /* 轻微放大避免模糊效果被卡片边框裁切 */
    transform: translate(-50%, -50%) scale(1.05);
}

@keyframes autoRotate {
    to {
        --angle: 360deg;
    }
}

<div class="card">
  <!-- 卡片内容示例 -->
  <p>玻璃态卡片示例内容</p>
</div>

关键修改说明： #

• 玻璃态实现：.card使用半透明背景+backdrop-filter: blur()实现玻璃效果，同时添加内边距避免内容贴紧边框。
• 渐变边框裁剪：给.card::before添加mask属性，通过两个渐变的复合裁剪（mask-composite: exclude），只让padding区域（即边框）显示渐变，中间内容区被隐藏，彻底解决透明背景下渐变透入内部的问题。
• 兼容处理：添加-webkit-前缀兼容webkit内核浏览器（如Chrome、Safari）。
• 优化模糊阴影：给.card::after添加轻微放大，避免模糊效果被卡片边框裁切，让阴影展示更自然。

这样修改后，无论卡片背景是否透明，渐变只会出现在边框上，同时玻璃态效果和旋转模糊阴影都能正常保留。

内容的提问来源于stack exchange，提问作者Phoenix Blaze