The Design

响应式设计上的联系人表单具有带有内嵌阴影和规则外部阴影的输入域.请参见下图.

The Code

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

The Issue

iOS v4+无法正确显示方框阴影.见下图.

Tested

我已try 使用-webkit-box-dow.

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
                   inset 2px 2px 3px rgba(0, 0, 0, .2);

我对输入元素应用了display:block;.

Current Workaround

我不希望这样做，但这是我唯一能得到我想要的效果的方法.

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上的嵌入阴影也不会正确渲染；但它已经足够接近了.

My Question

是否可以在iOS设备上正确渲染单个元素上的多个长方体阴影实例？如果不是，那么嵌入的阴影又是怎么回事呢？或者我没有正确使用此属性及其值？

Thanks in advance!个