Содержание
Совместимость
The compatibility table on this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome Полная поддержка 55 | Edge Полная поддержка 12 Замечания | Firefox Полная поддержка 3.5 | IE Полная поддержка 10 Замечания | Opera Полная поддержка 42 | Safari Полная поддержка 9.1 | WebView Android Полная поддержка 55 | Chrome Android Полная поддержка 55 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 42 | Safari iOS Полная поддержка 9.3 | Samsung Internet Android Полная поддержка 6.0 | |
Animations | Chrome Полная поддержка 55 | Edge Полная поддержка 79 | Firefox Полная поддержка 49 | IE Нет поддержки Нет | Opera Полная поддержка 42 | Safari Нет поддержки Нет | WebView Android Полная поддержка 55 | Chrome Android Полная поддержка 55 | Firefox Android Полная поддержка 49 | Opera Android Полная поддержка 42 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 6.0 |
Chrome Полная поддержка 23 | Edge Полная поддержка 79 | Firefox Полная поддержка 54 | IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 6.1 | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка 54 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 6.1 | Samsung Internet Android Полная поддержка 1.5 | |
and | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Полная поддержка 51 Замечания | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Полная поддержка 51 Замечания | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
On HTML elements | Chrome Полная поддержка 23 | Edge Полная поддержка 79 | Firefox Полная поддержка 3.5 | IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 6.1 | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 6.1 | Samsung Internet Android Полная поддержка 1.5 |
Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Полная поддержка 71 | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Полная поддержка 63 Отключено | Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет | |
On SVG elements | Chrome Полная поддержка 23 | Edge Полная поддержка 12 | Firefox Полная поддержка 52 | IE Полная поддержка 10 | Opera Полная поддержка 15 | Safari Полная поддержка 6.1 | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 25 | Firefox Android Полная поддержка 52 | Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 6.1 | Samsung Internet Android Полная поддержка 1.5 |
Демонстрация
Для более наглядного представления мы подготовили пару примеров.
В первом примере используем:
- Свойство
- Переходы CSS
- Селектор или
Сначала изображение скрыто с помощью обрезки. Затем, при наведении курсора мыши на кнопку изображение разворачивается за 0.5с от центра.
<iframe style=»width: 100%; height: 350px» src=»http://jsfiddle.net/zNcTR/4/embedded/result,html,css,js»></iframe>
Эффектно? Второй пример показывает более реалистичное применение свойства вместе с другими селекторами и переходами.
В следующем уроке мы сделаем вполне реальное приложение с использованием свойства .
Поддержка clip-path
В августе 2014 года «CSS Masking Module» был опубликован как «Возможная рекомендация», что является шагом вперёд по сравнению с ранним этапом «Рабочий проект»
Прежде чем мы посмотрим на поддержку браузерами, важно рассмотреть несколько способов, как clip-path может применяться к элементу, поскольку поддержка браузером зависит от каждого метода
Существует два способа использования clip-path.
1. на CSS
Основные фигуры из «» обеспечивают удобный способ использования clip-path. Доступны разные фигуры: polygon, circle, ellipse и inset; inset предназначен для прямоугольников.
2. на SVG
В качестве альтернативы можно создать фигуру с помощью SVG, а затем обрезать элемент по этой фигуре с помощью синтаксиса URL. Есть два способа сделать это:
- через указатель на встроенный SVG (то есть разметка SVG существует в самой странице);
- со ссылкой на внешний документ SVG.
В обоих случаях в SVG используется элемент clipPath для обёртывания элемента, который определяет обтравочный контур, будь то круг, многоугольник или другой элемент. Сравните демонстрационную версию ниже в Firefox и в браузере WebKit или Blink, таком как Chrome, чтобы определить различия. Квадратные изображения подразумевают отсутствие поддержки браузера.
Третье изображение не отображается в Safari. Несмотря на обширную отладку, мне не удалось решить эту проблему. Я была бы признательна за примечание в разделе комментариев, если вы столкнетесь с решением.
See the Pen Clip-path: Browser support by webref (@webref) on CodePen.
Поскольку вы, вероятно, собрались смотреть демонстрацию выше в разных браузерах, причудлива и в настоящее время зависит от того, как вы хотите обрезать элемент.
на CSS: Firefox 54+, Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+
Обратите внимание, что для всех поддерживаемых браузеров в настоящее время требуется префикс -webkit. (Кроме Firefox — прим
переводчика).
на SVG: все перечисленные выше браузеры и Firefox 3.5+.
Свойство clip-path ещё не поддерживается в Internet Explorer, но в настоящее время разрабатывается как часть «Masking Module».
Современные браузеры WebKit и Blink поддерживают обтравочные контуры на SVG, только если они объявлены встроенными (то есть внутри документа). Ссылки на внешние SVG поддерживаются только в Firefox, о чем свидетельствует демонстрация выше. Проект Chromium отслеживает эту ошибку.
Давайте рассмотрим преимущества CSS и SVG при работе с clip-path.
Преимущества CSS
- Ясный синтаксис лёгок для понимания из-за относительной простоты базовых фигур.
- Адаптивность легко получается через относительные единицы, такие как проценты.
Преимущества SVG
- Поддержка браузерами лучше, добавляется Firefox.
- Вы можете сделать обрезку сложными фигурами, несколькими фигурами и текстом.
Кроме того CSS предлагает свойство background-clip, которое даёт нам некоторые варианты (включая нестандартный способ обрезки текста), при этом ни background-clip, ни clip-path не соответствуют тому, что может делать отсечение на SVG в современных браузерах. Однако знакомство с clip-path через CSS менее устрашающе (особенно если вы не знакомы с манипуляцией SVG) и подготовит вас к тонкостям обтравочных контуров с помощью SVG, а также к модулю CSS Shapes Module, где содержимое выравнивается по форме элемента.
Если вам не терпится вникнуть в матрицу отсечения на SVG, обзор Сары Суэйдан станет хорошей отправной точкой.
Давайте рассмотрим плюсы и минусы использования clip-path для прогрессивного улучшения нашего дизайна.
Плюсы
Браузеры, которые не поддерживают свойство clip-path, будут его игнорировать
Если вы используете свойство осторожно, пользователи с неподдерживаемыми браузерами ничего не заподозрят! После создания обтравочного контура спецификация заявляет, что события указателя не должны отправляться за пределы области отсечения (что идеально). Таким образом, события щелчка . Вы можете использовать проценты или любую единицу длины, например пиксели или em, для определения координат базовых фигур с помощью CSS
Гибкие единицы, такие как проценты, могут использоваться для создания отзывчивых фигур, идеально подходящих для адаптивных макетов.
Минусы
- Все границы, тени и контуры . Вы не можете добавить границу и ожидать её соблюдения. Ниже мы рассмотрим некоторые альтернативы.
- Спецификация ещё не достигла стадии «Рекомендация», поэтому всегда есть шанс, что синтаксис поменяется.
- Сообщается о нескольких ошибках с clip-path и трёхмерными трансформациями, переходами и прозрачностью, которые описаны ниже. Помните об этом и избегайте комбинирования свойств, которые порождают такие ошибки.
Синтаксис
Свойство определяется как одно или комбинация значений перечисленных ниже.
Значения
- Представляет URL ссылку на траекторию, ограничивающую элемент.
- , , ,
- Если определен в комбинации с , это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как ). Геометрия может быть определена с помощью одного из следующих значений:
- Использует границы объекта в качестве базовой области.
- Использует stroke bounding box в качестве базовой области.
- Использует ближайший SVG viewport в качестве базового блока. Если отриут определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом и ширина и высота базового блока устанавливаются равными значениям атрибута .
- Использует margin box в качестве базового блока.
- Использует border box в качестве базового блока.
- Использует padding box в качестве базового блока.
- Использует content box в качестве базового блока.
- Обрезанная область не создается.
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function
backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside
caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor
direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight
grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows
hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing
line-height list-style list-style-image list-style-position list-style-type
margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode
object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y
padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes
resize right
scroll-behavior
tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top
transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function
unicode-bidi user-select
vertical-align visibility
white-space width word-break word-spacing word-wrap writing-mode
z-index
CSS Properties
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
Official Syntax
-
Syntax:
clip-path: <clip-source> | | none /* where */ <clip-source> = <url> /* URL references an SVG <clipPath> element */ /* and */ <geometry-box> = <shape-box> | fill | stroke | view-box
- Initial: none
- Applies To: All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements
- Animatable: See
Notes
The is a shape created using the basic shape functions. See the entry for details.
The can be either a or one of the three keywords: , , .
The defines the reference box for the s created using the shape functions. It can be one of the following values: , , , . These boxes are applied and can be used on HTML elements.
The other three geometry box values are applied to SVG elements. SVG elements don’t have a box model, and so the values will have no effect on them. As a matter of fact, the values will resolve to the value .
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Пример 2: Анимация базовых фигур через transition
Наведите курсор на фиолетовый шестиугольник и он превратится в восьмиугольник. Однако заданного эффекта перехода не произойдёт.
See the Pen Clip-path: shape transition: Part 1 by webref (@webref) on CodePen.
Причина объясняется в статье Сары Суэйдан об анимации фигур через CSS: «Число точек, определяющих конечную фигуру, должно быть таким же, как число точек, определяющих начальную фигуру». Вполне логично!
Поскольку шестиугольник содержит шесть пар координатных точек, давайте добавим две пары через дублирование, чтобы их стало восемь и они соответствовали числу пар для восьмиугольника. Эти дублированные пары не будут влиять на форму шестиугольника.
Вот описание шестиугольника с шестью парами координатных точек:
А это описание шестиугольника с восемью парами координат, первые две из которых были дублированы:
Теперь переход при трансформации фигур будет плавным, как видно в демонстрации ниже.
Учтите, что для браузеров, которые поддерживают обтравочные контуры только на SVG, нам нужно добавить анимацию SMIL, чтобы получить бесшовный переход при наведении. Согласно спецификации SMIL, декларативные анимации могут применяться для анимации линий и точек многоугольника в SVG, что в настоящее время невозможно с помощью CSS.
Имейте в виду, что некоторые люди и уделяют особое внимание внедрению Web Animations API, который, к сожалению, находится на стадии рабочего проекта. В демонстрации ниже (фоновое изображение предоставлено morgueFile), вы можете видеть, как мы анимировали точки многоугольника между событиями mouseover и mouseout в течение 0,2 секунд
Присмотритесь к тегу в разметке SVG
В демонстрации ниже (фоновое изображение предоставлено morgueFile), вы можете видеть, как мы анимировали точки многоугольника между событиями mouseover и mouseout в течение 0,2 секунд. Присмотритесь к тегу <animate> в разметке SVG.
See the Pen Clip-path: shape transition: Part 2 by Karen Menezes (@imohkay) on CodePen.
语法
/* Keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); /* Box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* Global values */ clip-path: inherit; clip-path: initial; clip-path: unset;
clip-path属性指定为下面列出的值的一个或多个值的组合.
取值
- 用 表示剪切元素的路径
- 一种形状,其大小和位置由<几何盒>值定义。如果没有指定几何框,则边框将用作参考框
- 如果同 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 定义的剪切路径)。几何框盒可以有以下的值中的一个:
-
- 使用 margin box 作为引用框。
- 使用 border box 作为引用框。
- 使用 padding box 作为引用框。
- 使用 content box 作为引用框。
- 利用对象边界框作为引用框。
- 使用笔触边界框(stroke bounding box)作为引用框
- 使用最近的 SVG 视口(viewport)作为引用框。如果 属性被指定来为元素创建 SVG 视口,引用框将会被定位在坐标系的原点,引用框位于由 属性建立的坐标系的原点,引用框的尺寸用来设置 属性的宽高值。
- 不创建的剪切路径。
Note: A computed value other than results in the creation of a new stacking context the same way that CSS does for values other than .
Финал: оживляем текст
Чтобы добавить огня, используем знакомый нам по JavaScript цикл @for. Его нет в стандартном CSS, но мы же используем препроцессоры, поэтому не будем себя ограничивать.
Нам понадобится команда @keyframes — она отвечает в CSS за раскадровку анимации. Проще говоря, если мы зададим кадры с параметрами 0%, 50% и 100%, то у нас в начале, середине и конце анимации могут быть разные картинки.
Задача такая: нужно сделать анимацию из 20 кадров для каждого элемента, чтобы любой кадр немного отличался от остальных. Это даст тот самый рваный и непредсказуемый эффект, который нам нужен. Для этого мы в цикле прогоним переменную i от 0 до 20, чтобы получился 21 кадр, и каждый кадр отрисуем в прямоугольнике со случайными начальными координатами, чтобы усилить эффект:
Что тут происходит:
- Мы задали отдельную раскадровку для каждого из двух псевдоэлементов.
- Анимация каждого такого элемента будет состоять из 21 кадра (20 + нулевой начальный).
- В цикле @for мы задаём раскадровку с шагом в 5% (1/20).
- На каждом проходе цикла рисуем виртуальный прямоугольник со случайными координатами по высоте. Этот прямоугольник как бы «обрезает» проглючившую надпись (от английского clip), то есть глючная версия надписи прорывается кусками.
- Значение в 780 пикселей нужно для того, чтобы эффект зацепил всю надпись. Если будет меньше, то последние символы останутся без эффектов.
Сконвертированный CSS-код, который можно добавить на страницу
JavaScript
JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()
JS Boolean constructor prototype toString() valueOf()
JS Classes constructor() extends static super
JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()
JS Error name message
JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()
JS JSON parse() stringify()
JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()
JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()
JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx
JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while
JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()
示例
HTML
<p class="border-box">The background extends behind the border.</p> <p class="padding-box">The background extends to the inside edge of the border.</p> <p class="content-box">The background extends only to the edge of the content box.</p> <p class="text">The background is clipped to the foreground text.</p>
CSS
p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); }
С этим читают