html - 如何使用双白底边框创建输入？

Question

大家好，请帮我在底部创建带有边框和双白边框的输入...这是我的css和html，谢谢布拉斯）

    <input type="text" id="inputName" name="name">
body {background:#F1EFEB; }
input{
      border: 1px solid #CFC8BC;
      border-radius: 4px;
    }

Answer 1

box-shadow使用属性的垂直偏移的一种选择

input {
border: 1px solid #CFC8BC;
border-radius: 4px;
-moz-box-shadow: 0 01px #CFC8BC;
-webkit-box-shadow: 0 01px #CFC8BC;
box-shadow: 0 01px #CFC8BC;
}

http://jsfiddle.net/3ZSN4/

您也可以包含inset关键字并使用负垂直偏移：

http://jsfiddle.net/3ZSN4/1/

Answer 2

它看起来像border-bottom: 3px double white作品。不过，我只检查了 Firefox 和 Chrome。

当然，您必须更改背景颜色input才能看到白色边框。

http://jsfiddle.net/ghodmode/MPt7Y/