css文字环绕之shape-outside

在新闻报刊上以及word排版上经常可以看到文字围绕图片效果,使用css浮动可以很轻松的达到文字环绕图片的效果,代码如下:

  <style>
    .container {
      width: 400px;
    }

    .container img {
      width: 150px;
      float: left;
      /* margin-right: 10px; */
    }
  </style>
  <div class="container">
    <img src="monna.jpeg" alt="" srcset="">
    迈克尔·乔丹在在1984年NBA选秀中于第1轮第3位被芝加哥公牛队选中,职业生涯曾效力于芝加哥公牛队以及华盛顿奇才队,新秀赛季当选NBA年度最佳新秀。1986-87赛季,乔丹场均得到37.1分,首次获得NBA得分王称号。1991-93赛季,乔丹连续2次荣膺常规赛MVP(1991、1992)和3次总决赛MVP(FMVP)
    ,率领芝加哥公牛队3夺NBA总冠军。1993年10月6日因父亲被害而宣布退役,两年后宣布复出。1996年入选NBA50大巨星。1996-98赛季,乔丹荣膺个人职业生涯第10次(共10次)NBA得分王以及第5次(共5次)常规赛MVP,并再次率领公牛队3夺(共6次)NBA总冠军,自己当选共第6次总决赛MVP。1999年1月13日在劳资谈判失败后再次宣布退役,两年后在华盛顿奇才队再次宣布复出。迈克尔·乔丹的职业生涯年年入选NBA全明星阵容(共14次)并3次当选NBA全明星MVP,10次入选NBA最佳阵容一阵,1985年入选NBA最佳阵容二阵,1988年荣膺NBA年度最佳防守球员,
    9次入选NBA最佳防守阵容一阵,3次荣膺NBA抢断王,2次夺得NBA全明星扣篮大赛冠军,1984年以及1992年夺得奥运会金牌。
  </div>

结果是这样:

 

 

 

可以看到文字距离图片有一个外边距,因为我们设置了图片的外边距。假设我们希望文字紧贴图片(有同学会说不设置margin不就行了,当然可以),那假如图片设置了边框,内边距又怎么办?

css有个属性可以控制文字环绕的行为shape-outside,这个属性作用你可以理解成 background-origin,他们的属性值也很类似。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>shape-outside</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-gap: 10px;
      background-color: #65a;
      color: #fff;
    }

    .box>.item {
      position: relative;
      border: 1px solid #fff;
    }

    .box>.item::after {
      position: absolute;
      left: 50%;
      bottom: 10px;
      font-size: 30px;
      border: 1px solid #fff;
      border-radius: 30px;
      padding: 5px 15px;
      content: attr(id);
    }

    .box>.item img {
      padding: 20px;
      width: 200px;
      height: 268px;
      float: left;
      margin: 20px;
      background-color: #f00;
      border: 10px solid #0f0;
    }

    .box>.item:nth-child(1)>img {
      shape-outside: content-box;
    }

    .box>.item:nth-child(2)>img {
      shape-outside: padding-box;
    }

    .box>.item:nth-child(3)>img {
      shape-outside: border-box;
    }

    .box>.item:nth-child(4)>img {
      shape-outside: margin-box;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="item" id='content-box'><img src="./monna.jpeg" alt="">
      迈克尔·乔丹在在1984年NBA选秀中于第1轮第3位被芝加哥公牛队选中,职业生涯曾效力于芝加哥公牛队以及华盛顿奇才队,新秀赛季当选NBA年度最佳新秀。1986-87赛季,乔丹场均得到37.1分,首次获得NBA得分王称号。1991-93赛季,乔丹连续2次荣膺常规赛MVP(1991、1992)和3次总决赛MVP(FMVP)
      ,率领芝加哥公牛队3夺NBA总冠军。1993年10月6日因父亲被害而宣布退役,两年后宣布复出。1996年入选NBA50大巨星。1996-98赛季,乔丹荣膺个人职业生涯第10次(共10次)NBA得分王以及第5次(共5次)常规赛MVP,并再次率领公牛队3夺(共6次)NBA总冠军,自己当选共第6次总决赛MVP。1999年1月13日在劳资谈判失败后再次宣布退役,两年后在华盛顿奇才队再次宣布复出。迈克尔·乔丹的职业生涯年年入选NBA全明星阵容(共14次)并3次当选NBA全明星MVP,10次入选NBA最佳阵容一阵,1985年入选NBA最佳阵容二阵,1988年荣膺NBA年度最佳防守球员,
      9次入选NBA最佳防守阵容一阵,3次荣膺NBA抢断王,2次夺得NBA全明星扣篮大赛冠军,1984年以及1992年夺得奥运会金牌。</div>
    <div class="item" id='padding-box'><img src="./monna.jpeg" alt="">
      迈克尔·乔丹在在1984年NBA选秀中于第1轮第3位被芝加哥公牛队选中,职业生涯曾效力于芝加哥公牛队以及华盛顿奇才队,新秀赛季当选NBA年度最佳新秀。1986-87赛季,乔丹场均得到37.1分,首次获得NBA得分王称号。1991-93赛季,乔丹连续2次荣膺常规赛MVP(1991、1992)和3次总决赛MVP(FMVP)
      ,率领芝加哥公牛队3夺NBA总冠军。1993年10月6日因父亲被害而宣布退役,两年后宣布复出。1996年入选NBA50大巨星。1996-98赛季,乔丹荣膺个人职业生涯第10次(共10次)NBA得分王以及第5次(共5次)常规赛MVP,并再次率领公牛队3夺(共6次)NBA总冠军,自己当选共第6次总决赛MVP。1999年1月13日在劳资谈判失败后再次宣布退役,两年后在华盛顿奇才队再次宣布复出。迈克尔·乔丹的职业生涯年年入选NBA全明星阵容(共14次)并3次当选NBA全明星MVP,10次入选NBA最佳阵容一阵,1985年入选NBA最佳阵容二阵,1988年荣膺NBA年度最佳防守球员,
      9次入选NBA最佳防守阵容一阵,3次荣膺NBA抢断王,2次夺得NBA全明星扣篮大赛冠军,1984年以及1992年夺得奥运会金牌。</div>
    <div class="item" id='border-box'><img src="./monna.jpeg" alt="">
      迈克尔·乔丹在在1984年NBA选秀中于第1轮第3位被芝加哥公牛队选中,职业生涯曾效力于芝加哥公牛队以及华盛顿奇才队,新秀赛季当选NBA年度最佳新秀。1986-87赛季,乔丹场均得到37.1分,首次获得NBA得分王称号。1991-93赛季,乔丹连续2次荣膺常规赛MVP(1991、1992)和3次总决赛MVP(FMVP)
      ,率领芝加哥公牛队3夺NBA总冠军。1993年10月6日因父亲被害而宣布退役,两年后宣布复出。1996年入选NBA50大巨星。1996-98赛季,乔丹荣膺个人职业生涯第10次(共10次)NBA得分王以及第5次(共5次)常规赛MVP,并再次率领公牛队3夺(共6次)NBA总冠军,自己当选共第6次总决赛MVP。1999年1月13日在劳资谈判失败后再次宣布退役,两年后在华盛顿奇才队再次宣布复出。迈克尔·乔丹的职业生涯年年入选NBA全明星阵容(共14次)并3次当选NBA全明星MVP,10次入选NBA最佳阵容一阵,1985年入选NBA最佳阵容二阵,1988年荣膺NBA年度最佳防守球员,
      9次入选NBA最佳防守阵容一阵,3次荣膺NBA抢断王,2次夺得NBA全明星扣篮大赛冠军,1984年以及1992年夺得奥运会金牌。</div>
    <div class="item" id='margin-box'><img src="./monna.jpeg" alt="">
      迈克尔·乔丹在在1984年NBA选秀中于第1轮第3位被芝加哥公牛队选中,职业生涯曾效力于芝加哥公牛队以及华盛顿奇才队,新秀赛季当选NBA年度最佳新秀。1986-87赛季,乔丹场均得到37.1分,首次获得NBA得分王称号。1991-93赛季,乔丹连续2次荣膺常规赛MVP(1991、1992)和3次总决赛MVP(FMVP)
      ,率领芝加哥公牛队3夺NBA总冠军。1993年10月6日因父亲被害而宣布退役,两年后宣布复出。1996年入选NBA50大巨星。1996-98赛季,乔丹荣膺个人职业生涯第10次(共10次)NBA得分王以及第5次(共5次)常规赛MVP,并再次率领公牛队3夺(共6次)NBA总冠军,自己当选共第6次总决赛MVP。1999年1月13日在劳资谈判失败后再次宣布退役,两年后在华盛顿奇才队再次宣布复出。迈克尔·乔丹的职业生涯年年入选NBA全明星阵容(共14次)并3次当选NBA全明星MVP,10次入选NBA最佳阵容一阵,1985年入选NBA最佳阵容二阵,1988年荣膺NBA年度最佳防守球员,
      9次入选NBA最佳防守阵容一阵,3次荣膺NBA抢断王,2次夺得NBA全明星扣篮大赛冠军,1984年以及1992年夺得奥运会金牌。</div>
  </div>
</body>

</html>

 

posted @ 2020-05-04 22:59  zt123123  阅读(757)  评论(0编辑  收藏  举报