CSS 数据类型

CSS <number> 数据类型表示标量值，通常用于数值量。它是任何数值的通用术语，可以包括整数、小数、负数和科学记数法。

CSS <number>: 有效语法

以下是有效数字的列表:

编号描述
21原始 <integer> 也是 <number>。
3.03正分数
-264.22负分数
0.0零
+0.0零，带前导+.
-0.0零，带前导 -.
.55不带前导零的小数。
11e6科学计数法。
-5.3e-4复杂的科学记数法。

CSS <number>: 无效语法

以下是无效数字列表:

数字描述
32.在小数点后必须至少有一位数字。
+-45.2只能有一个前导 +/-。
14.5.6只能有一位小数。

CSS <number>: 检查有效性/无效

在下面的示例中，输入值并检查输入的数字是否有效

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
      text-align: center;
   }
   h1 {
      color: #333;
   }
   #input {
      padding: 10px;
      margin: 20px;
      font-size: 16px;
   }
   #result {
      font-size: 18px;
      margin-top: 10px;
   }
   .valid {
      color: green;
   }
   .invalid {
      color: red;
   }
   #submitBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>检查输入值是否有效</h1>
<label for="input">输入值:</label>
<input type="text" id="input" placeholder="输入一个数字">
<button id="submitBtn" onclick="checkNumberValidity()">提交</button>
<div id="result"></div>
<script>
   function checkNumberValidity() {
      const inputElement = document.getElementById('input');
      const resultElement = document.getElementById('result');
      const inputValue = inputElement.value.trim();
      // 验证数字的正则表达式
      const numberRegex = /^([+-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?|[+-]?Infinity)$/;
      if (numberRegex.test(inputValue)) {
         resultElement.textContent = '不正确的数字类型';
         resultElement.className = 'valid';
      } 
      else {
         resultElement.textContent = '不正确的数字类型';
         resultElement.className = 'invalid';
      }
   }
</script>
</body>
</html>

CSS <number>: cubic-bezier() 函数

<number> 数据类型在以下示例中的cubic-bezier() 函数中使用，用于指定沿三次贝塞尔曲线的控制点。

这些控制点的 x 和 y 坐标由四个 <number> 确定值，范围从0到1，它们影响过渡效果的加速度和时间。

<html>
<head>
<style>
   .number {
      transition-property: font-size, color;
      transition-duration: 1.5s;
      font-size: 24px;
      color: blue;
      margin: 10px;
      padding: 10px;
      display: inline-block;
      transition-timing-function: cubic-bezier(.17, .67, .83, .67);
   }
   .number:hover {
      font-size: 36px;
      color: red;
   }
</style>
</head>
<body>
<span class="number">将鼠标悬停在该文本上！</span>
</body>
</html>