GPT代码优化

破晓之翼

发布于 2023-05-03 11:10:34

3810

发布于 2023-05-03 11:10:34

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style type="text/css">
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 20px;
        }
        .box {
            width: 100px;
            height: 100px;
            margin: 0 50px;
            border-radius: 50%;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5px;
        }
        .box:nth-child(1) {
            background: linear-gradient(to bottom, yellow, red);
        }
        .box:nth-child(2) {
            background: linear-gradient(to right, yellow, red);
        }
        .box:nth-child(3) {
            background: linear-gradient(to bottom right, red, yellow);
        }
    </style>
</head>
<body>
<!--此处写代码-->
<div class="container">
    <div class="box">上向下发生渐变</div>
    <div class="box">左到右发生渐变</div>
    <div class="box">左上角到右下角发生渐变</div>
</div>
</html>

在CSS中，给.container设置了justify-content: center;和align-items: center;属性，使得三个div元素在水平和垂直方向上都居中显示。另外，添加了box-shadow和border-radius属性，给三个div元素添加了阴影和圆角效果。在.box中，添加了margin: 0 50px;属性，使得三个div元素之间的间隔为50px。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除

center