CSS常用样式-个人页面圆形头像

G018_star sky♬

已于 2022-04-24 16:54:16 修改

阅读量364

点赞数

分类专栏： CSS 文章标签： css

于 2021-08-17 13:40:24 首次发布

本文链接：https://blog.csdn.net/qq_42526440/article/details/119754782

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .container {
      margin: 0;
      top: 0;
    }

    .box {
      width: 100%;
      height: 750px;
      background: blue;
      position: relative;
    }

    .boxBorder {
      width: 100%;
      height: 80px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 0;
      bottom: -40px;
    }

    .radius {
      background: #456BD9;
      clip-path: circle(50%);
      width: 300px;
      height: 300px;
      margin: -600px 0px 200px 325px;
      /* margin: 0 auto; */
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 正方形 -->
    <div class="box">
      <!-- 圆角 -->
      <!-- <div class="radius"></div> -->
      <div class="boxBorder"></div>
    </div>
  </div>
  <div class="radius">
  </div>
</body>

</html>

效果如下:
在这里插入图片描述

G018_star sky♬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常用样式-个人页面圆形头像

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .container{ margin: 0; top: 0; } .box{ width: 100%; height: 750px; background:blue;
复制链接

扫一扫