怎么用html5写一个圆角数字输入框，且该数字输入框内有一个初始值，同时数字输入框内的数值可以进行等差加减操作，且数字输入框前面有文本说明该数字输入框的作用

你可以使用以下HTML和CSS代码来创建一个圆角数字输入框，其中包括初始值，等差加减操作和文本说明：

HTML代码：

<div class="input-container">
  <label for="number-input">Number Input:</label>
  <div class="input-group">
    <button class="minus-button">-</button>
    <input type="number" id="number-input" value="0" />
    <button class="plus-button">+</button>
  </div>
</div>

CSS代码：

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
  margin: 20px;
}

.label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.input-group {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

.minus-button,
.plus-button {
  background-color: #eee;
  border: none;
  font-size: 18px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.minus-button:hover,
.plus-button:hover {
  background-color: #ddd;
}

#number-input {
  border: none;
  outline: none;
  font-size: 18px;
  width: 50px;
  text-align: center;
}

#number-input::-webkit-inner-spin-button,
#number-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#number-input[type="number"] {
  -moz-appearance: textfield;
}

#number-input:focus {
  box-shadow: 0 0 0 1px #007bff;
}

.plus-button {
  border-radius: 0 5px 5px 0;
}

.minus-button {
  border-radius: 5px 0 0 5px;
}

解释：

1. HTML代码中，我们首先创建一个包含标签和数字输入框的容器div。标签用来说明数字输入框的作用，数字输入框使用input元素创建，初始值设置为0。

2. 在数字输入框周围，我们使用另一个div元素创建一个输入框组，包括两个按钮（加和减）和数字输入框。减号按钮和数字输入框之间没有空格，加号按钮和数字输入框之间也没有空格。

3. CSS代码中，我们首先定义了整个输入容器的样式，包括flex布局，字体，边距等。

4. 我们使用label元素定义标签的样式，包括字体大小，粗细和下边距。

5. 我们使用flex布局定义输入组的样式，包括边框，边框半径，填充和按钮的样式。

6. 我们使用CSS伪元素定义了数字输入框的样式，包括去掉内外旋转按钮，去掉箭头，去掉默认样式，设置输入框聚焦时的边框阴影。

7. 最后，我们设置了加号和减号按钮的边框半径，让它们分别在左右两端有圆角。

现在，你的圆角数字输入框就已经创建好了，可以运行代码看看效果。