我有一个底部只有边框的输入字段，现在我需要在输入的左侧和右侧创建一条小线。有点难以描述，所以我举个例子：
input {
background-color: transparent;
height: 20px;
padding: 10px 10px 1px;
border: 0;
border-bottom: 1px solid red;
}<input type="text" placeholder="Example">Fiddle https://jsfiddle.net/38f5ygpe/3/
This is what I have:
This is what I need it to look like:
使用多个盒子阴影 https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow在输入上可以让你有这样的下划线效果：
input {
height:20px;
padding:0 5px;
border: 0;
box-shadow: -9px 9px 0px -7px red, 9px 9px 0px -7px red;
width:300px;
}<input placeholder="Example" type="text" />The 扩展半径和 X/Y 偏移 https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Valuessbox-shadow 的值需要根据输入的高度进行调整，正如您在本例中看到的，输入较高：
input {
height:20px;
padding:10px 5px;
border: 0;
box-shadow: -18px 18px 0px -17px red, 18px 18px 0px -17px red;
width:300px;
}<input placeholder="Example" type="text" />浏览器支持box-shadows 是 IE9+ http://caniuse.com/#feat=css-boxshadow.