效果
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title></title><style>.bg1 {width: 100%;height: 40px;/* 背景色45度倾斜 */background: linear-gradient(45deg, #09196c 0%, #09196c 60%, #09196cbf 60%, #09196cbf 70% , #09196c54 70%, #09196c54 80%, white 80%, white 100%);}.bg2 {width: 100%;height: 40px;/* 由深蓝渐变为白色 */background: linear-gradient(to right, #09196c 0%, white 100%);}.bg3 {width: 100%;height: 40px;/* 上下两色分明 */background: linear-gradient(to bottom, white 0%, white 60%, #09196c 60%, #09196c 100%);border: 1px solid #000;}.bg4 {width: 100%;height: 40px;/* 左右两色分明 */background: linear-gradient(to right, white 0%, white 60%, #09196c 60%, #09196c 100%);border: 1px solid #000;}</style></head><body><h1>多层颜色</h1><div class="bg1"></div><h1>渐变颜色</h1><div class="bg2"></div><h1>上下两色分明</h1><div class="bg3"></div><h1>左右两色分明</h1><div class="bg4"></div></body></html>
参考连接：/qq_41860203/article/details/111559665
