[分享]css两边向中间渐变

CSS渐变是一种很常见的效果，在其中，“两边向中间渐变”也是一种非常受欢迎的样式。本文将为您介绍如何使用CSS实现这种效果。.container { backgroundimage: lineargr...

CSS渐变是一种很常见的效果，在其中，“两边向中间渐变”也是一种非常受欢迎的样式。本文将为您介绍如何使用CSS实现这种效果。

.container {
  background-image: linear-gradient(to right, #72C6EF, #004E8F);
  height: 100%;
  display: flex;
}

.container::before,
.container::after {
  content: "";
  flex-grow: 1;
  background: linear-gradient(to bottom, transparent 0%, #000 100%);
}

.container::before {
  margin-right: -1px;
}

.container::after {
  margin-left: -1px;
} 

代码中，我们首先定义了一个名为.container的样式类，设置了背景渐变的效果。接下来，我们使用了伪元素:before和:after，将其插入到父元素容器里，以达到左右渐变的效果。其中，clearfix仅用于清除浮动，这里不再赘述。

这样一来，我们就完成了两边向中间渐变的效果！虽然我们在这里使用了伪元素，但事实上，您也可以根据需求，通过其他元素和属性来达到同样的效果，比如使用box-shadow和border等属性。