使用css给div添加一些几何元素背景

最新推荐文章于 2022-11-10 15:20:47 发布

Ritchie___

最新推荐文章于 2022-11-10 15:20:47 发布

阅读量448

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40278455/article/details/104570090

版权

css 专栏收录该内容

13 篇文章 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>
  <style>
    body {
      margin: 0;
      background-color: #f0f0f0;
    }

    .banner {
      height: 200px;
      background-color: #0c2140;
      position: relative;
      overflow: hidden;
    }

    .circle {
      background: linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1));
      border-radius: 50%;
    }

    .circle-1 {
      height: 50px;
      width: 50px;
      position: absolute;
      top: 30px;
      left: 50px;
    }

    .circle-2 {
      height: 300px;
      width: 300px;
      position: absolute;
      top: 100px;
      left: 40px;
    }

    .circle-3 {
      height: 300px;
      width: 300px;
      position: absolute;
      top: -50px;
      left: 250px;
    }

    .circle-4 {
      height: 50px;
      width: 50px;
      position: absolute;
      top: 30px;
      right: 500px;
    }

    .circle-5 {
      height: 300px;
      width: 300px;
      position: absolute;
      top: -150px;
      right: -150px;
    }

  </style>
</head>

<body>
  <div class="banner">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
    <div class="circle circle-4"></div>
    <div class="circle circle-5"></div>
  </div>
</body>

</html>

效果

在这里插入图片描述

Ritchie___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css给div添加一些几何元素背景

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...
复制链接

扫一扫

专栏目录