Блог

Главная - Вопросы по программированию - Разница между свойствами clip-path и shape-outside

Разница между свойствами clip-path и shape-outside

#css #clip-path

#css #контур клипа

Вопрос:

Я знаю, что clip-path используется для создания маски для элемента, но я не уверен в разнице между свойствами clip-path и shape-outside и могут ли они использоваться вместе

Комментарии:

1. Привет, добро пожаловать в StackOverflow. Пожалуйста, отредактируйте свой вопрос, чтобы указать документацию / статьи, которые вы просмотрели, и почему они не помогли, поскольку этот сайт обычно ожидает, что вы проведете собственное исследование, прежде чем перейти сюда. Соответствует ли эта страница css-tricks.com/almanac/properties/s/shape-outside помочь?

Ответ №1:

Оба «создают невидимые слои», но для разных целей.

clip-path: заключается в том, чтобы «обрезать» элемент, создавая поверх него маску, закрывающую части, которые вы не хотите показывать. Это не влияет на то, как элементы вокруг него перемещаются (у них все еще есть поле в качестве ссылки)

shape-outside: создайте невидимый слой вокруг элемента, из которого будут выводиться онлайн-элементы вокруг него (теперь у них есть пользовательская форма в качестве ссылки). shape-outside не вырезает элемент и не влияет на его внешний вид.

введите описание изображения здесь
Примечание: На этом изображении вы можете видеть, как текст перемещается вокруг созданной формы-outside (фиолетовой)

Оба могут быть идеально использованы совместно.

css-shapes-editor — потрясающее расширение / инструмент, который может помочь вам работать с обоими свойствами https://www.youtube.com/watch?v=zdWsBZiGiZc

Ответ №2:

Свойства CSS shape-outside определяют, что происходит вокруг элемента, в то время как clip-path применяется к этому элементу.

Таким образом, если у вас есть элемент div, то по умолчанию это блок (прямоугольный или квадратный в зависимости). Вы можете применить радиус границы 50% к div, и это сделает его круглым, но любые элементы вокруг круглого div все равно будут выглядеть как прямоугольник. Если бы вы хотели, чтобы текст повторял изгибы окружности, вам нужно было бы применить свойства shape-outside к div.

Свойства clip-path не позволяют отображать определенные области элемента вместо отображения всей области.

Теоретически вы могли бы использовать их вместе в зависимости от результата, которого вы пытаетесь достичь.

обведите 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();
 }