前端css 实现背景渐变，边框渐变

server/2024/11/25 19:24:00/

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 渐变背景和边框</title><style>.container {display: flex;justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */gap: 20px;/* 子项间距 */}.container-item {position: relative;width: 180px;/* 宽度 */height: 60px;/* 高度 */margin: 20px auto;/* 居中显示 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 背景渐变 */background: linear-gradient(to left,rgba(52, 152, 219, 0) 5%,/* 左侧完全透明 */rgba(52, 152, 219, 0.9),/* 中间渐变颜色 */rgba(52, 152, 219, 0)/* 右侧完全透明 */);/* 边框渐变伪元素 */.num {font-family: "lcd";font-size: 28px;}}.container-item::before,.container-item::after {content: "";position: absolute;left: 0;right: 0;height: 4px;background: linear-gradient(to left,rgba(52, 152, 219, 0) 5%,/* 左侧完全透明 */rgba(52, 152, 219, 0.9),/* 中间渐变颜色 */rgba(52, 152, 219, 0)/* 右侧完全透明 */);}.container-item::before {top: 0;/* 上边框 */}.container-item::after {bottom: 0;/* 下边框 */}/* 青绿色容器 */.container-green {background: linear-gradient(to left,rgba(26, 188, 156, 0) 5%,/* 左侧完全透明 */rgba(26, 188, 156, 0.9),/* 中间渐变颜色 */rgba(26, 188, 156, 0)/* 右侧完全透明 */);}.container-green::before,.container-green::after {background: linear-gradient(to left,rgba(26, 188, 156, 0) 5%,/* 左侧完全透明 */rgba(26, 188, 156, 0.9),/* 中间渐变颜色 */rgba(26, 188, 156, 0)/* 右侧完全透明 */);}</style>
</head><body><div class="container"><div class="container-item container-green"></div><div class="container-item container-blue"></div></div>
</body></html>