CSS零碎知识点（3）——居中头像

最新推荐文章于 2024-12-16 10:27:19 发布

原创最新推荐文章于 2024-12-16 10:27:19 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS零碎知识点专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS调整初始框中的头像大小和样式，如设置正方形盒子、圆形边框、圆角背景和定位，以实现一个美观的130x130像素头像。

初始框的代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
        /* 居中0 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 居中1 */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="touxiang">
      	<img src="https://beta.pili.com.tw/img/role/640x741/yulongyinshi_1.jpg" alt="头像">
      </div>
    </div>
  </body>
</html>

图片太大了，比框还要大

设置touxiang盒子和img的CSS样式

#app #touxiang {
  height: 130px; /* 设置包裹图片盒子的高度 */
  width: 130px; /* 设置包裹图片盒子的宽度，宽高相等是一个正方形盒子 */
  border: 1px solid #eee; /* 给包裹图片盒子设置一些边界 */
  border-radius: 50%; /* 把包裹图片盒子设置一个圆形盒子 */
  padding: 10px; /* 设置内边距 */
  box-shadow: 0 0 10px #ddd; /* 再设置点阴影 */
  background-color: #fff; /* 设置盒子的背景色 */
  /* 设置包裹图片盒子的位置0 */
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  /* 设置包裹图片盒子的位置1 */
}
#app #touxiang img {
  width: 100%;/* 设置背景图片宽百分之百 */
  height: 100%;
  border-radius: 50%; /* 设置背景图片也是圆形 */
  background: #eee;
}

一个漂亮的头像完成了

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
        /* 居中0 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 居中1 */
      }

      #app #touxiang {
        height: 130px;
        /* 设置包裹图片盒子的高度 */
        width: 130px;
        /* 设置包裹图片盒子的宽度，宽高相等是一个正方形盒子 */
        border: 1px solid #eee;
        /* 给包裹图片盒子设置一些边界 */
        border-radius: 50%;
        /* 把包裹图片盒子设置一个圆形盒子 */
        padding: 10px;
        /* 设置内边距 */
        box-shadow: 0 0 10px #ddd;
        /* 再设置点阴影 */
        background-color: #fff;
        /* 设置盒子的背景色 */
        /* 设置包裹图片盒子的位置0 */
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 设置包裹图片盒子的位置1 */
      }

      #app #touxiang img {
        width: 100%;
        /* 设置背景图片宽百分之百 */
        height: 100%;
        border-radius: 50%;
        /* 设置背景图片也是圆形 */
        background: #eee;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="touxiang">
        <img src="https://beta.pili.com.tw/img/role/640x741/yulongyinshi_1.jpg" alt="头像">
      </div>
    </div>
  </body>
</html>