随便用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>
相关推荐
拖孩6 分钟前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
Hejjon20 分钟前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js
小堃学编程1 小时前
前端学习(3)—— CSS实现热搜榜
前端·学习
Wannaer1 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js
不灭锦鲤1 小时前
xss-labs靶场基础8-10关(记录学习)
前端·学习·xss
Bl_a_ck2 小时前
--openssl-legacy-provider is not allowed in NODE_OPTIONS 报错的处理方式
开发语言·前端·web安全·网络安全·前端框架·ssl
懒羊羊我小弟2 小时前
手写符合Promise/A+规范的Promise类
前端·javascript
互联网搬砖老肖2 小时前
Web 架构之负载均衡会话保持
前端·架构·负载均衡
肥肥呀呀呀3 小时前
在Flutter上如何实现按钮的拖拽效果
前端·javascript·flutter
Zero1017133 小时前
【React的useMemo钩子详解】
前端·react.js·前端框架