css不规则的文本环绕

最新推荐文章于 2024-04-22 20:07:06 发布

 勿忘初心

最新推荐文章于 2024-04-22 20:07:06 发布

阅读量420

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64740434/article/details/135825045

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>不规则的文本环绕</title>
    <style>
      .box img {
        float: left;
        margin-right: 1em;
        border-radius: 50%;
        object-fit: cover;
        /* shape-outside 设置元素的外形形状，使文本或其他内容能够沿着该外形形状进行环绕布局。
        在 shape-outside 属性中，可以使用 circle() 函数来创建一个圆形形状。
        circle() 函数接受 3 个参数，分别是圆心的水平位置、圆心的垂直位置和半径。
        circle(50% at 50% 50%) 表示一个以元素中心为圆心、半径为元素宽度的一半的圆形。
        其中的 50% 表示圆心在水平方向上位于元素宽度的中心位置，50% 表示圆心在垂直方向上位于元素高度的中心位置。 */
        shape-outside: circle(50% at 50% 50%);
      }
      .box span {
        line-height: 2;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="../assets/img/猫.jpg" alt="" width="300px" height="300px" />
      <span
        >家猫，久已被人类驯养的一种食肉类动物，通常被认为是一个独立的种，虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的，有一些变种，主要的区别在于皮毛的长短，体形以及尾的有无
        迎猫，为其食田鼠也。——《礼记》家猫，久已被人类驯养的一种食肉类动物，通常被认为是一个独立的种，虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的，有一些变种，主要的区别在于皮毛的长短，体形以及尾的有无
        迎猫，为其食田鼠也。——《礼记》家猫，久已被人类驯养的一种食肉类动物，通常被认为是一个独立的种，虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的，有一些变种，主要的区别在于皮毛的长短，体形以及尾的有无
        迎猫，为其食田鼠也。——《礼记》家猫，久已被人类驯养的一种食肉类动物，通常被认为是一个独立的种，虽然可能是由几种旧大陆的小型野猫的杂交后代中通过自然选择而最后衍生的，有一些变种，主要的区别在于皮毛的长短，体形以及尾的有无
        迎猫，为其食田鼠也。——《礼记》</span
      >
    </div>
  </body>
</html>

在这里插入图片描述

 勿忘初心

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css不规则的文本环绕

其中的 50% 表示圆心在水平方向上位于元素宽度的中心位置，50% 表示圆心在垂直方向上位于元素高度的中心位置。circle(50% at 50% 50%) 表示一个以元素中心为圆心、半径为元素宽度的一半的圆形。在 shape-outside 属性中，可以使用 circle() 函数来创建一个圆形形状。/* shape-outside 设置元素的外形形状，使文本或其他内容能够沿着该外形形状进行环绕布局。circle() 函数接受 3 个参数，分别是圆心的水平位置、圆心的垂直位置和半径。
复制链接

扫一扫