clip-path 和 shape-outside 属性之间的区别

Question

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

Answer 1

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

所以如果你有一个 div 元素，它默认是一个块（取决于矩形或正方形）。您可以对 div 应用 50% 的边框半径，这将使它变圆，但圆形 div 周围的任何元素仍然看起来像一个盒子。如果您希望文本跟随圆的曲线，您需要将 shape-outside 属性应用于 div。

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

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

圆圈 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();
 }

Answer 2

两者都"create invisible layers"但目的不同。

clip-path: 是"trim"一个元素在他上面创建一个遮罩，遮住你不想显示的部分。它不影响它周围的元素如何浮动（它们仍然有一个框作为参考）

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

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

浮动

两者可以完美结合使用

css-shapes-editor 是一个了不起的 extension/tool 可以帮助您使用这两个属性 https://www.youtube.com/watch?v=zdWsBZiGiZc

clip-path 和 shape-outside 属性之间的区别

Difference between the clip-path and shape-outside properties

css

clip-path