iPhone iOS将不会正确显示框阴影 [英] iPhone iOS will not display box-shadow properly

问题描述

设计

响应式设计上的联系人表单具有带有插入阴影和常规外部阴影的输入字段。

---

代码

  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 +未正确显示框阴影。

---

测试

我试图使用-webkit- box-shadow。

  -webkit-box-shadow：0px 0px 5px rgba（0，0，0，.25）， 
 inset 2px 2px 3px rgba（0，0，0，.2）; 
  

我已经应用了 display：block; 输入元素。

---

目前解决方法

 < 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; 
} 
 
输入{
 background：#fff; $ b¥b 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上的插入阴影也不能正确呈现;但它够近。
 
 
 
 
 
 
我的问题
 
 
 
可能在单个元素上有多个box-shadow实例在iOS设备上正确呈现？如果不是，插图阴影呢？ 
 = 
 
 h2_lin>解决方案
尝试添加 -webkit-appearance：none;  iOS会混乱形式。
 
The Design

The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below.





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+ does not display the box-shadow properly. See image below.





Tested

I have attempted using -webkit-box-shadow.
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
                   inset 2px 2px 3px rgba(0, 0, 0, .2);
I have applied display:block; to the input element.



Current Workaround

I would prefer not having to do this, but this is the only way I can get my desired effect.

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);
    }
Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough.



My Question

Is it possible to have multiple instances of box-shadow on a single element render properly on iOS devices? If not, what about the inset shadow? Or am I using this property and its values incorrectly?

Thanks in advance!
解决方案
Try adding -webkit-appearance: none; iOS tends to mess up forms.

                        
这篇关于iPhone iOS将不会正确显示框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！