clip-path和shape-outside属性之间的差异

Question

我知道clip-path用于在元素上创建一个mask，但是我不确定clip-path和shape-outside属性之间的区别以及它们是否可以一起使用

Answer 1

两者都“创造不可见的层”，但用于不同的目的。

clip-path：它是“修剪”一个元素，在他上面创建一个掩盖你不想显示的部分的面具。它不会影响它周围的元素如何浮动（它们仍然有一个框作为参考）

outside-shape：在元素周围创建一个不可见的图层，其周围的在线元素浮动（它们现在有一个自定义形状作为参考）。外形不会切割元素或影响它的外观。

注意：在此图像中，您可以看到文本如何浮动在创建的外部形状周围（紫色的）

两者都可以完美结合使用。

css-shapes-editor是一个很棒的扩展/工具，可以帮助你使用https://www.youtube.com/watch?v=zdWsBZiGiZc这两个属性

Answer 2

CSS shape-outside属性定义元素周围发生的事情，而clip-path适用于该元素。

因此，如果你有一个div元素，它默认是一个块（矩形或方形取决于）。您可以将一个50％的边界半径应用于div，这将使其成为圆形，但圆形div周围的任何元素仍然会显示为方框。如果您希望文本遵循圆的曲线，则需要将形状外部属性应用于div。

剪辑路径属性可防止显示元素的某些区域，而不是显示完整区域。

在理论上，你可以根据你想要达到的结果一起使用它们。

circle Div显示它旁边的元素如何不绕圆圈流动

<div class="wrapper">
   <div id="circle"></div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
         Maxime illum iure ab minus. Fugiat necessitatibus consequatur 
          eos minus quo, tempora iusto ratione magnam quidem voluptate 
          molestiae minima dignissimos iste facere? 
      </p>
    </div>

CSS

#circle{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
   border-radius: 50%;
   }

.wrapper{
   width: 300px;
 }

显示文本如何围绕圆圈流动的元素。

   <div class="wrapper">
       <div class="circle"></div>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
           Maxime illum iure ab minus. Fugiat necessitatibus consequatur 
           eos minus quo, tempora iusto ratione magnam quidem voluptate 
           molestiae minima dignissimos iste facere? 
         </p>
      </div>

CSS

.wrapper{
  width: 300px;
 }


.circle {
   height: 200px;
   width: 200px;
   border-radius: 50%;
   background-color: #7db9e8;
   margin: 0 25px 5px 0;
   float: left;
   -webkit-shape-outside: circle();
   shape-outside: circle();
 }