如何在表单输入上做阴影边框？答案

【问题标题】：How to do a shadowed border on a form input?如何在表单输入上做阴影边框？
【发布时间】：2016-11-01 18:52:54
【问题描述】：

您好，我的任务是使输入字段看起来像下面的屏幕截图：

除了边框阴影之外，我什么都能做。这可以使用 css 吗？

在 Photoshop 文件中，该层被赋予“内发光”，这负责边框阴影。

这是图层样式的截图：

到目前为止，这是我的 css，以防万一：

#input_1_1 {
    background-color: #f1f5f6;
    border-radius: 12px;
    height: 47px;
    padding: 0 17px;
}

谢谢！

【问题讨论】：

标签： html css psd

【解决方案1】：

您需要使用box-shadow——只需使用这些值，直到与模型匹配。

input {
   box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

【讨论】：

谢谢你，先生，这是一个很好的起点，我会搞乱价值观

【解决方案2】：

类似这样的：

#input_1_1 {
    background-color: #f1f5f6;
    border-radius: 12px;
    height: 47px;
    padding: 0 17px;
  border: none;
  box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.4);
}

&lt;input id="input_1_1" type="text" name="name"&gt;

【讨论】：

谢谢！贝塞尔比你领先了几分钟，但我给了你一个赞成票