html - 如何在输入框周围创建 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: content-box;   -moz-background-clip: content-box;        background-clip: content-box;

另一个更简单的选择是使用 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);        box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);