一个div，宽度300px,高度100px,其中上面30px的背景色为红色，其余为白色，怎么写

您可以使用CSS中的 `linear-gradient()` 和 `background-size` 属性来实现这个效果，以下是一个样式示例：

div {
  width: 300px;
  height: 100px;
  background: linear-gradient(to bottom, red 30px, white 30px);
  background-size: 100% 100%;
}

解释：

- `width: 300px` 和 `height: 100px` 属性分别设置了 div 元素的宽度和高度。
- `background` 属性中使用 `linear-gradient()` 来定义线性渐变的方向和颜色。
- `to bottom` 表示渐变方向从上到下。
- `red 30px` 表示从顶部开始30像素的渐变色为红色。
- `white 30px` 表示从顶部下来30像素的渐变色为白色。
- `background-size: 100% 100%;` 表示将背景图片大小设置为与元素相同，以免出现重复或缩放问题。