该设计
联系表单上的响应式设计具有既与插图阴影和定期外阴影输入字段。 见下图。
代码
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}
问题
iOS版V4 +不能正常显示的box-shadow。 见下图。
经测试
我一直在使用-webkit-箱阴影尝试。
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
inset 2px 2px 3px rgba(0, 0, 0, .2);
我已经应用display:block;
到输入元件。
目前的解决方法
我宁愿没有这样做,但这是我能得到我想要的效果的唯一途径。
HTML
<p><input /></p>
CSS
p {
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
border-radius:4px;
}
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2);
}
即使有这样的解决方法,在iOS上的插图阴影未正确呈现; 但它是足够接近。
我的问题
是否有可能有箱阴影的多个实例的单个元素在iOS设备上正常显示? 如果没有,对插图的影子是什么? 还是我使用这个属性和它的值不正确?
提前致谢!