好看的渐变色div效果,橙色渐变效果

1163人阅读 2024/9/21 9:37 总访问：1184294 评论：0 收藏：0 手机

分类: 前端

<!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>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价