Cri*_*ion 11
也许这可能是一个优雅的解决方案.
如果您使用背景,那么您可以非常精确地指定所发生的事情并稍微提高可读性.
input[type="text"] {
padding: 10px;
background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
background-size: 1px 20%, 100% 1px, 1px 20%;
background-position: bottom left, bottom center, bottom right;
background-repeat: no-repeat;
border: none;
color: #999;
}<input type="text" />- 您能详细说明移动设备的性能和盒子阴影还是链接参考？我知道动画对于箱形阴影动画而言并不是昂贵的性能(这可能会与渐变相比较有用)但不能用于堆叠.此外,对于盒阴影,浏览器支持更宽([IE9 +用于盒阴影](http://caniuse.com/#feat=css-boxshadow)) (4认同)
- @CrissLion你的消息来源不谈渐变渲染所以我测试了(你的解决方案和我的)localy在chrome.根据这些,使用盒阴影的绘画和渲染时间比使用渐变更短.结果在[此截图](http://i.imgur.com/7hAPVZA.png).左边是线性渐变和右边的盒子阴影.测试是在一个有80个输入的页面上进行的. (3认同)
- @ web-tiki你是完全正确的. (2认同)
web*_*iki 10
使用2个框阴影,您可以实现底部边框和两侧的小边框.这是一个例子:
input[type=text] {
width:300px; height:17px;
border: 0; outline:none;
padding:0;
box-shadow: -5px 5px 0px -4px #000, 5px 5px 0px -4px #000;
text-align:center;
}<input placeholder="Email" type="text" value=""/>需要根据输入的高度和左/右边框的所需高度来调整框阴影的展开半径和X/Y偏移.正如您在此示例中看到的那样,输入的高度不同:
input {
width:300px; height:40px;
padding:0;
border: 0; outline:none;
box-shadow: -18px 18px 0px -17px #000, 18px 18px 0px -17px #000;
text-align:center;
}<input placeholder="Email" type="text" />我会采用稍微不同的方法来处理web-tiki,并使用包装div和伪元素,因为这不需要固定的高度输入(但需要这个额外的元素):
input {
border: none;
}
div {
display: inline-block;
position: relative;
margin-bottom: 30px;
}
div:before {
content: "";
position: absolute;
bottom: 0;
left: -2px;
height: 50%;
width: 100%;
border: 2px solid black;
border-top: none;
}
textarea {
display: block;
height: 100px;
/*border:none*/
/*This was commented to show where text area is*/
}<div>
<input type="text" placeholder="Please Enter your PIN" />
</div>
<br/>
<div>
<textarea placeholder="Please Enter your bank details and mother's maiden name;)"></textarea>
</div>