好看的渐变色div效果,橙色渐变效果 电脑版发表于：2024/9/21 9:37 <img src="https://img.tnblog.net/arcimg/xiuxin2/bf14dfa980294cd6bb373796b49e5e8d.png" style="width:266px;height:auto;"> ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="highlight-div">内容</div> </body> </html> <style> .highlight-div { width: 200px; /* 或其他宽度 */ height: 100px; /* 或其他高度 */ background: linear-gradient(to right, #ff7e5f, #feb47b); /* 从左到右的渐变色 */ /* 如果想要垂直渐变，可以使用 to bottom */ color: #fff; /* 文字颜色 */ display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ /* 其他样式，如边框、圆角等 */ border-radius: 10px; /* 圆角 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果，可选 */ } </style> ```
