CSS بوردر ایمیج کی اپریٹ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

border-image ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਸ਼ਾਰਟਕੇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਹੇਠ ਲਿਖੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੈਟ ਕਰਦੀ ਹੈ:

ਜੇਕਰ ਮੁੱਲ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਜਾਵੇਗਾ, ਤਾਂ ਮੂਲਤਵੀ ਮੁੱਲ ਸੈਟ ਕੀਤਾ ਜਾਵੇਗਾ。

ਸੁਝਾਅ:ਬੌਧਿਕ ਬਟਨ ਬਣਾਉਣ ਲਈ border-image-* ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਤੋਂ ਕਰੋ!

ਹੋਰ ਦੇਖੋ:

CSS3 ਸਿੱਖਿਆCSS3 ਬਾਰਡਰ

ਉਦਾਹਰਣ

ਇਮੇਜ ਨੂੰ div ਐਲੀਮੈਂਟ ਦੇ ਬੋਰਡਰ ਵਜੋਂ ਨਿਰਧਾਰਿਤ ਕਰੋ:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਪੰਨੇ ਦੇ ਨਾਲ ਹੋਰ ਉਦਾਹਰਣ ਹਨ。

CSS ਗਰੰਥ

border-image: source slice width outset repeat|initial|inherit;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ ਟੈਸਟ
border-image-source ਬੋਰਡਰ ਵਿੱਚ ਵਰਤੀ ਗਈ ਇਮੇਜ ਦੀ ਰਾਹ
border-image-slice ਇਮੇਜ ਬੋਰਡਰ ਦੇ ਅੰਦਰ ਸਮੇਟਣ ਦੀ ਮਾਤਰਾ
border-image-width ਇਮੇਜ ਬੋਰਡਰ ਦੀ ਚੌੜਾਈ
border-image-outset ਬੋਰਡਰ ਦੇ ਬਾਹਰ ਇਮੇਜ ਬੋਰਡਰ ਦੀ ਮਾਤਰਾ
border-image-repeat ਇਮੇਜ ਬੋਰਡਰ ਕਿਵੇਂ ਪਲੈਟ ਹੋਵੇ, ਰਾਉਂਡ ਹੋਵੇ ਜਾਂ ਸਟ੍ਰੈਚ ਹੋਵੇ ਚੁਣੋ。 ਟੈਸਟ

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਤਵੀ ਮੁੱਲ: none 100% 1 0 stretch
ਵਿਰਾਸਤੀਕਰਣ: no
ਸੰਸਕਰਣ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੰਥ object.style.borderImage="url(border.png) 30 30 round"

ਹੋਰ ਉਦਾਹਰਣ

ਬੋਰਡਰ-ਇੰਜ਼ੀਕਸ ਬਟਨ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਬੋਰਡਰ-ਇੰਜ਼ੀਕਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਰਾਹੀਂ ਬਟਨ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਦਿਖਾਇਆ ਗਿਆ ਹੈ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਹੋਣ ਵਾਲੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਸ਼ੁਰੂਆਤੀ ਵਰਜਨ ਸਬੰਧੀ ਸਿਫਾਰਸ਼ ਪੰਨੇ ਵਿੱਚ ਦਿੱਤੀ ਗਈ ਹੈ。

ਚਰਮੋਨਾ IE / ਐਜ਼ਕਸ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-