css创建静态页面（壁纸）

最新推荐文章于 2023-12-13 09:03:25 发布

城南粥铺

最新推荐文章于 2023-12-13 09:03:25 发布

阅读量196

点赞数

分类专栏：原码文章标签： css html

本文链接：https://blog.csdn.net/m0_73373547/article/details/128831627

版权

本文介绍了如何利用CSS技巧创建圆形元素，并将其布局在页面上形成壁纸效果，包括将方框转换为圆形、居中显示文本以及定位多个圆形。

摘要由CSDN通过智能技术生成

本文主要是针对如何将方框变为圆形，将文本置于方框中间以及将不同的圆形放在不同的位置上，最终呈现在出一个简单的页面壁纸。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2023 新年快乐</title>
  <style type="text/css">
      body{
        background: #e79da6;

        width: 500px;
        height: 500px;
      }
       p{
       font-size:30px;
       /* 设置字体 */
       font-family:华文行楷;
       /* 设置字体加粗 */
       font-weight: bold;
       /* 设置字体颜色 */
       color: #0a0909;
    }
       /* 定义三个盒子的相同属性 */
      .box1,.box2,.box3{
          border-radius:50%
      }/* 使原本正方形的框变为圆形 */

    .box1{background: #5f94d4;
        width:500px;
        height:500px;
        padding: 30px;
        border:10px solid #2272d2;
        right: 50%;
    }
    .box2{background: #b38ac9;
          width:400px;
          height:400px;
        padding: 30px;
        border:10px solid #9d5dc4;