代码之家 › 专栏 › 技术社区 › cup_of

如何在表单输入上设置阴影边框?

psd css html

0

cup_of · 技术社区 · 8 年前

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

除了边界阴影我什么都能做。这是否可能使用css?

在photoshop文件中,该层被赋予“内部辉光”,这负责边界阴影。

下面是图层样式的截图:

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

谢谢

2 回复 | 直到 8 年前

1

bezierer 8 年前

你需要使用 box-shadow

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

2

1

junkfoodjunkie 8 年前

像这样:

#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);
}

<input id="input_1_1" type="text" name="name">