CSS <number>数据类型表示标量值，通常用于数值数量。它是任何数值的通用术语，可以包括整数、小数、负数和科学记数法。
CSS <number> - 有效语法
以下是有效号码的列表：
| Number | 描述 |
|---|---|
| 21 | 原始<整数>也是一个<数字>。 |
| 3.03 | 正分数 |
| -264.22 | 负分数 |
| 0.0 | 零 |
| +0.0 | 零，带前导 +。 |
| -0.0 | 零，带前导 -。 |
| .55 | 不带前导零的小数。 |
| 11e6 | 科学记数法。 |
| -5.3e-4 | 复杂的科学记数法。 |
CSS <number> - 语法无效
以下是无效号码的列表：
| 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>Enter the number to check if it is valid or invalid</h1>
<label for="input">Enter a number:</label>
<input type="text" id="input" placeholder="Enter a number">
<button id="submitBtn" onclick="checkNumberValidity()">Submit</button>
<div id="result"></div>
<script>
function checkNumberValidity() {
const inputElement = document.getElementById('input');
const resultElement = document.getElementById('result');
const inputValue = inputElement.value.trim();
// Regular expression for validating numbers
const numberRegex = /^([+-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?|[+-]?Infinity)$/;
if (numberRegex.test(inputValue)) {
resultElement.textContent = 'Valid Number';
resultElement.className = 'valid';
}
else {
resultElement.textContent = 'Invalid Number';
resultElement.className = 'invalid';
}
}
</script>
</body>
</html>
CSS <number> - cubic-bezier（） 函数
在以下示例中，<number>数据类型用于 cubic-bezier（） 函数，用于指定沿 Cubic-Bezier 曲线的控制点。
这些控制点的 x 和 y 坐标由 4 个 <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">Hover over this text!</span>
</body>
</html>
