Почему следующее правило CSS не работает?

Question

У меня есть изображение в моей разметке:

<img src="http://img-url/img.jpg" /> 

Это мой CSS:

img { 
    clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%) fill-box; 
} 

Это работает, если я удалить fill-box часть. Итак, я использую это неправильно? Синтаксис от MDN, кажется:

<clip-source> | [ <basic-shape> || <geometry-box> ] | none 
where 
<clip-source> = <url> 
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> 
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box 

Ссылка собственности: https://developer.mozilla.org/en/docs/Web/CSS/clip-path

ли я не использовать его правильно? Что мне нужно изменить?

Answer 1

В основном причина в том, что браузеры не поддерживают функциональность, которую вы пытаетесь использовать.

Документы MDN, на которые вы ссылаетесь, являются хорошими, но на самом деле не объясняют позицию поддержки браузера, хотя статья действительно начинается с предупреждения о том, что она по-прежнему является «экспериментальной технологией».

WebPlatform - еще одна хорошая рекомендация, и ее docs for clip-path даже не упоминают заполнение.

Вы также можете обнаружить, что поддерживаемый синтаксис для отсечения отличается внутри SVG по сравнению с обычными элементами HTML, даже в том же браузере. В частности, заполнение и штрих - это свойства SVG, поэтому использование fill-box или stroke-box в контексте HTML может иметь смысл или не иметь смысла.

Поддержка браузером этих синтаксисов крайних случаев может со временем улучшиться, но на данный момент лучшим вариантом, который я могу предложить, является сокращение вашего использования до синтаксиса, который работает в текущих браузерах.

Answer 2

Правильный синтаксис

 
`img { 
    clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%); 
}` 

или

 
`img { 
    clip-path: fill-box; 
}` 

, потому что заполняющая коробка ключевое значение. если вы используете WebKit браузеры пытаются

 
`img { 
    -webkit-clip-path: fill-box; 
}` 

Answer 3

Если вы идете в the compatibility chart, вы увидите, что вам может понадобиться от поставщика префиксов.

Если вы используете Chrome или Firefox, вам необходимо использовать -web-kit-clip-path.