随便用css换个渐变的太阳

来源于GPT4o:代码来源

css 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变色上半圆</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .half-circle {
            width: 200px;
            height: 100px;
            background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* 渐变色从上到下 */
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            /* 隐藏下半部分 */
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    </style>
</head>
<body>
    <div class="half-circle"></div>
</body>
</html>
相关推荐
笔尖的记忆几秒前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin8889 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
lichenyang45317 分钟前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼17 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
软件技术NINI28 分钟前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
用户8417948145629 分钟前
vxe-table 实现列头授权自定义插槽模板,自定义输入框
前端
im_AMBER33 分钟前
Web 开发 24
前端·笔记·git·学习
小小前端_我自坚强36 分钟前
前端算法相关详解
前端·算法
小小前端_我自坚强42 分钟前
UniApp 微信小程序流水线发布全流程
前端·架构
小小前端_我自坚强1 小时前
vue提高技术 高级语法相关
前端·vue.js·前端框架