演示效果

这是一个橙色渐变背景示例。温暖的颜色能够吸引读者的注意力，适合用于强调重要内容或警告信息。

.gradient-paragraph { margin-bottom: 30px; padding: 25px; border-radius: 12px; line-height: 1.8; font-size: 1.6rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .gradient-paragraph:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .gradient-3 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #4a4a4a; border-left: 5px solid #e17055; }

这是一个灰色渐变背景示例。中性色调适合各种内容类型，不会分散读者对文本的注意力，同时提供视觉上的区分。

.gradient-paragraph { margin-bottom: 30px; padding: 25px; border-radius: 12px; line-height: 1.8; font-size: 1.6rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .gradient-paragraph:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .gradient-2 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #4a4a4a; border-left: 5px solid #4a69bd; }

这是一个蓝色到粉色的渐变背景示例。柔和的色彩过渡创造出平静而优雅的效果，非常适合用于引言或重要提示内容。

.gradient-paragraph { margin-bottom: 30px; padding: 25px; border-radius: 12px; line-height: 1.8; font-size: 1.6rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .gradient-paragraph:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .gradient-1 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #4a4a4a; border-left: 5px solid #6c5ce7; }

这是一个绿色渐变背景示例。清新的颜色让人联想到自然和成长，适合用于环保、健康或积极主题的内容。

.gradient-paragraph { margin-bottom: 30px; padding: 25px; border-radius: 12px; line-height: 1.8; font-size: 1.6rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .gradient-paragraph:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .gradient-4 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #4a4a4a; border-left: 5px solid #00b894; }

使用教程

代码教程

上品源码网，原文地址https://www.hgymw.com/27383.html