CSS新特性之shapes

最新推荐文章于 2023-04-12 11:36:45 发布

MW0309

最新推荐文章于 2023-04-12 11:36:45 发布

阅读量200

点赞数

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

本文链接：https://blog.csdn.net/qq_42222342/article/details/106143065

版权

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。
shape-outside

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新特性之Shapes（环绕文字）</title>
    <style>
        #parent{
            width: 300px;
            height: 300px;
            border: 1px blue solid;
            margin: 20px;
        }
        #shape{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px black solid;
            margin: 10px;
            float: left;
            border-radius: 50%;
            shape-outside: margin-box;
        }
    </style>
</head>
<body>
  <div id="parent">
      <div id="shape">
        MW
      </div>
      有这么一些人，在年夜团圆之际，放弃休息而登上没有硝烟的战场；有这么一些人，置自己生死于度外，而义无反顾地踏上前往疫区的火车；有这么一些人，穿着重重的防护服，在死神面前穿梭；有这么一些人，收起孩子气，披上白大褂，英勇挡在无数健康者前。
  </div>
</body>
</html>

在这里插入图片描述
clip-path
shape-margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新特性之Shapes（环绕文字）</title>
    <style>
        #parent{
            width: 300px;
            height: 300px;
            border: 1px blue solid;
            margin: 20px;
        }
      /*  #shape{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px black solid;
            margin: 10px;
            float: left;
            border-radius: 50%;
            shape-outside: margin-box;
        }*/
        #shape{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px black solid;
            margin: 10px;
            float: left;
            background: aquamarine;
           clip-path: polygon(0 0,0 100px,100px 100px);
            shape-outside: polygon(0 0,0 100px,100px 100px);
            shape-margin: 10px;
        }
    </style>
</head>
<body>
  <div id="parent">
      <div id="shape">
        MW
      </div>
      有这么一些人，在年夜团圆之际，放弃休息而登上没有硝烟的战场；有这么一些人，置自己生死于度外，而义无反顾地踏上前往疫区的火车；有这么一些人，穿着重重的防护服，在死神面前穿梭；有这么一些人，收起孩子气，披上白大褂，英勇挡在无数健康者前。
  </div>
</body>
</html>