iPhone的iOS将无法正常显示的box-shadow(iPhone iOS will not d

2019-06-24 19:25发布

该设计

联系表单上的响应式设计具有既与插图阴影和定期外阴影输入字段。 见下图。


代码

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设备上正常显示? 如果没有,对插图的影子是什么? 还是我使用这个属性和它的值不正确?

提前致谢!

Answer 1:

试着增加-webkit-appearance: none; iOS的往往陷入困境的形式。



文章来源: iPhone iOS will not display box-shadow properly