CSS Webkit-mask-size无效
1. Webkit-mask-size是什么
Webkit-mask-size是CSS中用于设置遮罩大小的属性，可以用于遮罩图片或其他元素。它可以被用于通过设置大小来控制遮罩的影响范围。这个属性被支持的浏览器有Safari和Chrome。
通过设置这个属性，我们可以控制遮罩的大小，这可以用于多种用途，比如遮罩动画和遮罩字体。
2. Webkit-mask-size无效原因
如果Webkit-mask-size在代码中没有起作用，这可能有多种原因。其中一些最常见的原因如下：
2.1. 浏览器不支持
Webkit-mask-size只被Chrome和Safari支持，如果使用其他浏览器，这个属性便是无效的。
2.2. CSS版本
Webkit-mask-size属性是CSS3的一部分，如果CSS版本过低，这个属性也无法使用。确保代码中的CSS版本是3或以上。
2.3. 不正确的值
Webkit-mask-size的值必须使用适当的单位，如px或em等。另外，如果给出的值在当前元素的大小范围之外，它也会无效。
2.4. 元素不正确
Webkit-mask-size只能用于可以被设置为遮罩的元素中。如图片，div或其他元素。
3. 解决Webkit-mask-size无效方法
有几种方法可以解决Webkit-mask-size属性无效的问题。
3.1. 检查浏览器版本
确保使用的浏览器是Safari或Chrome，否则这个属性将无效。
3.2. 更新CSS版本
确保CSS版本是3或以上。在html代码中的head元素中可以将CSS版本设置为3。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 示例</title>
<style type="text/css" media="screen">
/* CSS 3代码 */
</style>
</head>
<body>
</body>
</html>
3.3. 确保正确的值
使用正确的值。例如，如果想将遮罩大小设置为100像素，就要在CSS中写成：
-webkit-mask-size: 100px;或
-webkit-mask-size: 5em;确保值是当前元素大小范围之内。
3.4. 使用正确的元素
确保正确的元素能够被设置为一个遮罩。在HTML中，img、div、span等都可以用作元素。
4. 结论
Webkit-mask-size是CSS3的一部分，用于控制遮罩的大小，使得遮罩的影响范围更广。如果遇到遮罩大小无效的问题，可以从浏览器、CSS版本、值、元素几个方面去进行排查和解决。
5. 引用
Webkit-mask-size, Mozilla Developer Network, https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-mask-size.