CSS `border-image-source` Özelliği

CSS border-image-source özelliği; border-image özelliğinde belirtilen görselin kaynağını belirler. border-image-slice özelliği; kaynak dosyanın bölgelere ayrılmasını sağlanıp dinamik olarak belirlenen belgeler çerçeve görseli olarak kullanılabilir.

19.05.1919 / 19.05.1919^?

Yazar: SonDevrim szdfsdfsdf sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd

SonDevrimBu Yazı

Toplam343551459

Bugün123

`border-image-source` Özelliği Temel Özellikler

CSS Yazımı :

border-image-source: <none> | <görsel>;
 
<görsel> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

 
<görsel()> = image( [ [ <görsel> | <metin> ]? , <renk>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <CSS Kimlik Seçici> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

 
<CSS Renk> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <görsel> | <metin> ] <resolution>
<cf-mixing-image> = <yüzde>? && <görsel>
<cf-final-image> = <görsel> | <renk>
<linear-gradient()> = linear-gradient( [ <açı> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <açı> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <boyut> ]? [ at <konum> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || > ]? [ at <konum> ]? , <color-stop-list> )

 
<rgb()> = rgb( [ [ <yüzde>{3} | <sayı>{3} ] [ / <alfa-değeri> ]? ] | [ [ <yüzde>#{3} | <sayı>#{3} ] , <alfa-değeri>? ] )
<rgba()> = rgba( [ [ <yüzde>{3} | <sayı>{3} ] [ / <alfa-değeri> ]? ] | [ [ <yüzde>#{3} | <sayı>#{3} ] , <alfa-değeri>? ] )
<hsl()> = hsl( [ <renk-tonu> <yüzde> <yüzde> [ / <alfa-değeri> ]? ] | [ <renk-tonu>, <yüzde>, <yüzde>, <alfa-değeri>? ] )
<hsla()> = hsla( [ <renk-tonu> <yüzde> <yüzde> [ / <alfa-değeri> ]? ] | [ <renk-tonu>, <yüzde>, <yüzde>, <alfa-değeri>? ] )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<boyut> = closest-side | farthest-side | closest-corner | farthest-corner | <uzunluk> | <uzunluk-yüzde>{2}
<konum> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <uzunluk-yüzde> ] [ top | center | bottom | <uzunluk-yüzde> ]? | [ [ left | right ] <uzunluk-yüzde> ] && [ [ top | bottom ] <uzunluk-yüzde> ] ]

 
<alfa-değeri> = <sayı> | <yüzde>
<renk-tonu> = <sayı> | <açı>
<color-stop> = <renk> <uzunluk-yüzde>?
<uzunluk-yüzde> = <uzunluk> | <yüzde>

Örnek :

border-image-source: url(görsel.jpg); | border-image-source: linear-gradient(to bottom, red, white);

Öntanımlı Değer :

none

Uygulanabilen Etiketler :

border-collapse özelliği değeri collapse olan iç tablo ögeleri dışında, tüm etiketler. ::first-letter ögelerine de uygulanabilir.

Kalıtsallık :

Yok.

Tarayıcı Desteği :

Tüm Tarayıcılar

Animasyon :

Desteklenmiyor animation Özelliği

Javascript :

öge.style.borderImageSource = "none";

Sürüm :

CSS Backgrounds and Borders Module Level 3

Açıklama :

Çerçeve görselinin kaynağını belirler.

`border-image-source` Özelliği Kullanımı

Sponsor'un katkılarıyla...

Markanız için 300X300 alan.

`border-image-source` Özelliği Tarayıcı Desteği

MasaüstüTaşınabilir

Tarayıcı →Özellik ↓
Temel Destek	15	15	6	15	11

Tarayıcı →Özellik ↓
Temel Destek	15	?	?	?	?

`border-image-source` Özelliğinin Alabileceği Değerler

<none>: Çerçeve görseli kullanılmaz. border-style özelliğinde belirlenen desen kullanılır.
<görsel>: Çerçevede kullanılan görselin referansı.

CSS border-image-source Özelliği

border-image-source Özelliği Temel Özellikler

border-image-source Özelliği Kullanımı

border-image-source Özelliği Tarayıcı Desteği

border-image-source Özelliğinin Alabileceği Değerler

CSS `border-image-source` Özelliği

`border-image-source` Özelliği Temel Özellikler

`border-image-source` Özelliği Kullanımı

`border-image-source` Özelliği Tarayıcı Desteği

`border-image-source` Özelliğinin Alabileceği Değerler