CSS input元素text-shadow文本阴影被裁剪问题求助

问题原因 #

input元素的text-shadow是在元素盒模型（content+padding范围）内部绘制的，当阴影范围超出该区域时，会被默认裁剪规则截断，无法完整呈现Figma设计中的文本发光效果。

解决方案 #

方案1：使用filter: drop-shadow()替代text-shadow（推荐） #

drop-shadow()滤镜会在元素的整个可见内容外部生成阴影，不受元素盒模型边界限制，能完美匹配设计效果且无需修改元素尺寸：

修改后的完整CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background: #000000;
    width: 100vw;
    height: 100vh;
    display: grid;
}

input {
    appearance: none;
    width: max-content;
    height: max-content;
    padding: .69rem;
    place-self: center;
    font: 600 13px "Jost";
    color: #d44fe9;
    filter: drop-shadow(0 0 1rem #d44fe9e5);
    background: linear-gradient(to top, #81109333, #81109300), #000000;
    border: none;
    border-bottom: 1px solid #81109399;
    border-radius: .5rem;
    outline: none;
    box-shadow: 0 0 1rem #d33fe919;
}

方案2：调整内边距并允许溢出（不推荐，会改变元素尺寸） #

若坚持使用text-shadow，可通过增加上下内边距为阴影预留空间，并设置overflow: visible：

input {
    /* 其他属性不变 */
    padding: 1.2rem .69rem;
    overflow: visible;
    text-shadow: 0 0 1rem #d44fe9e5;
}

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