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

【问题标题】：Difference between the clip-path and shape-outside propertiesclip-path 和 shape-outside 属性之间的区别
【发布时间】：2019-08-01 02:30:41
【问题描述】：

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

【问题讨论】：

嗨，欢迎来到 StackOverflow。请编辑您的问题以识别您查看过的文档/文章以及为什么它们没有帮助，因为该站点通常希望您在来这里之前进行自己的研究。这个页面css-tricks.com/almanac/properties/s/shape-outside 有帮助吗？

标签： css clip-path

【解决方案1】：

两者都是“创建不可见层”，但目的不同。

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

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

注意：在这张图片中，您可以看到文本是如何围绕创建的 shape-outside（紫色）浮动的

两者可以完美结合使用。

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

【讨论】：

【解决方案2】：

CSS shape-outside 属性定义元素周围发生的情况，而剪辑路径适用于该元素。

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

clip-path 属性可防止显示元素的某些区域，而不是显示整个区域。

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

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

【讨论】：