Html 文本框大小在聚焦时减小/缩小

在

focus

上，

textbox

的大小似乎缩小了。但是，如果

边框宽度

设置为

2px

，则无法观察到这种减少。我想将

边框宽度

设置为

1px

，但没有类似于缩小的效果。怎样才能做到呢

#名称：焦点{
大纲：无；
边框：1px实心rgba（812032381）；
盒影：0 0 5pxRGBA（81、203、238、1）；
}
#名称2：焦点{
大纲：无；
边框：2个实心rgba（812032381）；
盒影：0 0 5pxRGBA（81、203、238、1）；
}

焦点上的边框宽度更改为1px


焦点上的边框宽度更改为2倍


默认文本框未添加任何效果

试试这个

#名称：焦点{
大纲：无；
边框颜色：rgba（812032381）；
边缘样式：脊；
盒影：0 0 5pxRGBA（81、203、238、1）；
}
#名称2：焦点{
大纲：无；
边框颜色：rgba（812032381）；
边缘样式：脊；
盒影：0 0 5pxRGBA（81、203、238、1）；
}

焦点上的边框宽度更改为1px


焦点上的边框宽度更改为2倍


默认文本框未添加任何效果

这里有多种方法。例如，您可以将默认边框宽度设置为1px（

#name 2

），或增加焦点上的填充（

#name

）。

#名称2{
边框：1px实心rgba（812032381）；
}
#名称2：焦点，
#名称：焦点{
大纲：无；
边框：1px实心rgba（812032381）；
盒影：0 0 5pxRGBA（81、203、238、1）；
}
#名称：焦点{
填充：2px；
}

填充更改为焦点上的2px

填充

边框默认设置为1px

边框

检查

可以通过在

框

上添加

填充

来解决此问题，其中必须添加对

焦点

的影响。
我在默认设置中添加了

padding:2px

<代码>填充：2px也可以添加到

焦点

上，但您的问题可以通过仅添加默认设置来解决。请查看

代码段

#名称：焦点{
大纲：无；
边框：1px实心rgba（812032381）；
盒影：0 0 5pxRGBA（81、203、238、1）；
填充：2px；
}
#名称2：焦点{
大纲：无；
边框：2个实心rgba（812032381）；
盒影：0 0 5pxRGBA（81、203、238、1）；
}

焦点上的边框宽度更改为1px


焦点上的边框宽度更改为2倍


默认文本框未添加任何效果

添加填充解决了问题。谢谢你的努力！