如何创建围绕输入框的 CSS 边框？

Question

我似乎无法通过谷歌来摆脱这个困境。我正在尝试重新创建如下所示的输入框。我想在输入框外部创建一个微妙的透明边框（透明度会有点低，在模型中很难看到。）

它似乎是在文本框内部制作边框，而不是在文本框外部。它还在边框底部（可能是输入框本身的底部）形成鲜明的突出显示。

模型图像

我的输入框 CSS

#merchantForm>form>input.inputValue {
    border-radius: 3px;
    height: 30px; width: 350px;
    margin-top: 5px;
    font-family: Helvetica,sans-serif; font-weight: bold; font-size: 19px; color: #333;
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
    border-style: solid;
    border-width: 5px;
    border-color: rgba(0,0,0,0.3);
}

有任何想法吗？我对 CSS 有点陌生，所以也欢迎任何改进我的 CSS 的建议。

Answer 1

默认情况下，元素的背景延伸到边框下方。要更改此行为，请使用以下命令：

-webkit-background-clip：内容框；
   -moz-background-clip：内容框；
        背景剪辑：内容框；

另一个更简单的选择是使用 CSS box-shadows 的 spread 属性：

-webkit-box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
   -moz-box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
        框阴影: 0 0 0 10px hsla(0, 0%, 0%, 0.5);