box-shadow在ios下没有显示,但是在android机下显示正常。
1、html如下
<textarea class="paScreenTxt" id="paScreenTxt">
2、css如下
.paScreenTxt{
width:98%;
height:200px;
display: block;
margin: 12px auto;
box-shadow: 0px 0px 2px 2px #CCC;
}
3、在android机下文本框有阴影,但是ios下显示效果和android不一样
4、是因为ios下给textarea设置默认边框样式
5、解决方法:加上样式 -webkit-appearance: none; 去掉Ios默认的样式
6、在ios下显示边框阴影,加上样式: -webkit-box-shadow: 0px 0px 2px 2px #CCC; 前面两个0px 0px表示给四条边框加上阴影 2px 2px 表示模糊的阴影半径 颜色#CCC 表示阴影颜色
7、完整的css如下:
.paScreenTxt{
width:98%;
height:200px;
display: block;
margin: 12px auto;
-webkit-appearance: none;
box-shadow: 0px 0px 2px 2px #CCC;
-webkit-box-shadow: 0px 0px 2px 2px #CCC;
}