WebView：根据Android API版本不同解释CSS的方式也不同

Question

我正在在Android WebView中使用这个简单的CSS。

.rounded{
  text-align: center;
  border-radius: 25px;
  border: 2px solid #FFFF014F;
}

在API 28的设备上完全正常工作。但是在一个API 22的设备上，我没有得到相同的结果(边框根本没有显示)。

这是我使用的两个设备(两个设备具有相同的分辨率):

我想要一个单一的CSS文件在所有Android版本中都能以相同的方式工作。所以:

• 有没有办法纠正这个问题?
• 是否有文档可以找到我可以使用的CSS属性取决于API版本?

- Alfonso_MA

---

你是否检查过使用API 22的设备是否支持8位颜色表示法？例如https://caniuse.com/#feat=css-rrggbbaa，请阅读底部的注释，并请检查此https://bugs.chromium.org/p/chromium/issues/detail?id=618472并选择@Kosh答案，这可能是在API版本上更加安全可靠的选择。 - user2560539

Answer 1

使用rgba()颜色表示法。

它比HEX rgba的支持更好。

让我们转换#FFFF014F：

红色：FF = 255
绿色：FF = 255
蓝色：01 = 1
Alpha通道：4F = 79/255 = .31

因此结果为：border: 2px solid rgba(255, 255, 1, .31);

body {background:navy}

span {
  display:inline-block;
  padding:.5em;
  margin:1em;
  text-align: center;
  border-radius: 25px;
  color:#fff;
}

.hex {border: 2px solid #FFFF014F}
.rgba {border: 2px solid rgba(255, 255, 1, .31)}

<span class="hex">#FFFF014F</span>
<span class="rgba">rgba(255, 255, 1, .31)</span>

- Kosh