IOS的渐变色的问题

demo地址

今天在做需求的时候，遇到一个有双重渐变色的按钮，因为不想做无聊的切图仔，能用css做的，基本都尝试用css做。这样能学到很多新的姿势，还提高了页面性能（逃。按钮是这样的

可以看出来，右上角那部分，也是一个渐变色，我们知道background是可以叠加的，后面的会覆盖前面的图片。用逗号分开，代码如下

div.btn {
  background:
    linear-gradient(189deg, #B4E2F4FF, transparent 38%), 
    linear-gradient(90deg,rgba(255,191,234,1),rgba(255,255,255,1));
}

可以很完美的实现上述效果。但是提测后发现，在ios下按钮会出现发黑的问题
经过研究发现，是因为ios下的渐变属性对transparent的支持很奇怪。会出现黑色的过渡效果。将背景的渐变色，改成rgba(255, 255, 255, 0)就可以了。兼容ios的代码如下

div.btn {
  background:
    linear-gradient(189deg, #B4E2F4FF,rgba(255, 255, 255, 0) 38%),   // 这里不再使用transparent
    linear-gradient(90deg,rgba(255,191,234,1),rgba(255,255,255,1));
}

后面又遇到了一个文字渐变的问题。
background有个clip属性，它支持用户自己选择背景显示在哪个层上面(border-box,content-box)，使用-webkit-background-clip: text;即可实现效果。代码如下

div.txt {
  font-size: 34px;
  background: linear-gradient(180deg, rgba(255, 221, 104, 1) 0%, rgba(129, 36, 255, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

同样的，在ios下会不生效经后来测试发现其实只有display:flex才不生效，会什么都不显示。调试中发现。将该元素的display改为-webkit-box即可实现效果。我在mdn上看了下，没有找到关于-webkit-box的描述。。。后面如果找到的话再更新。兼容ios的写法如下

div.txt {
  font-size: 34px;
  background: linear-gradient(180deg, rgba(255, 221, 104, 1) 0%, rgba(129, 36, 255, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: -webkit-box; // 加了个display即可
}

EmberYu / vic-blog

IOS的渐变色的问题 #19

demo地址