用css写一个由中间向两边渐变的蓝色线

可以使用以下 CSS 代码实现：

.gradient-line {
  height: 2px;
  background-image: linear-gradient(to right, #007bff, #ffffff, #007bff);
}

解释一下：

- `height: 2px;` 设置线的高度为 2 像素；
- `background-image` 属性设置背景图片，我们使用 `linear-gradient` 函数来创建渐变；
- `to right` 参数指定渐变方向是从左到右；
- `#007bff` 和 `#ffffff` 是渐变的起点和终点颜色，中间的 `#007bff` 表示渐变的中间颜色，可以根据需要进行调整。

相关问题

border-bottom 由中间向两边渐变的css怎么写

如果你想让`border-bottom`呈现从中间到两边的线性渐变效果，你可以使用CSS的线性渐变(`linear-gradient`)属性。但是，这个属性通常用于背景色，而不是边框。不过，有一种间接的方式可以模拟类似的效果，即通过创建两个伪元素（`:before`和`:after`），然后分别设置它们的宽度和颜色。

这是一个例子：

.container {
  position: relative;
  padding-bottom: /* 需要的渐变高度 */;
}

.container:before,
.container:after {
  content: "";
  display: block;
  width: 50%;
  height: 1px; /* 边框高度 */
  background-image: linear-gradient(to right, /* 开始颜色 */, /* 结束颜色 */);
}

.container:before {
  left: 50%; /* 将开始点移至容器左侧 */
}

.container:after {
  right: 50%; /* 将结束点移至容器右侧 */
}

在这个示例中，你需要将`/* 开始颜色 */`和`/* 结束颜色 */`替换为你想要的实际颜色值，比如`red`和`blue`。

注意，这并不是真正的`border-bottom`渐变，但它可以达到视觉上相似的效果。如果浏览器支持的话，直接在`border-bottom`上使用渐变可能会更好。

linear-gradient从中间向两边渐变

要创建从中间向两边渐变的线性渐变，你可以使用以下CSS代码：

background: linear-gradient(to right, #000000 0%, #ffffff 50%, #000000 100%);

这将创建一个从左到右的线性渐变，其中颜色由黑色到白色再到黑色。其中，`to right` 表示渐变方向为从左到右。你可以根据需要更改渐变的方向和颜色。