border-image-source
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Описание
The border-image-source CSS property defines the <image> to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead.
Примечание:
Though any <image> can be used with this CSS property, browser support is still limited and some browsers support only images defined using the url() functional notation.
| Начальное значение | none |
|---|---|
| Применяется к | все элементы, кроме внутренних табличных элементов, когда border-collapse:collapse. Это также применяется к ::first-letter. |
| Наследуется | нет |
| Обработка значения | none или изображение с абсолютным URI |
| Animation type | discrete |
Синтаксис
/* no border-image, use the specified border-style */
border-image-source: none;
/* the image.jpg is used as image */
border-image-source: url(image.jpg);
/* a gradient is used as image */
border-image-source: linear-gradient(to top, red, yellow);
/* Global values */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
Значения
none-
Specifies that no image should be used for the border. Instead the style defined by
border-styleis used. <image>-
Ссылка на изображение, которое будет использоваться в отрисовке границы.
Формальный синтаксис
border-image-source =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Примеры
See border-image for examples of what the various source values will do.
Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-source |
Совместимость с браузерами
Loading…