CSS بوردر-آپریٹ-ریپیٹ اپریٹ
- ਪਿਛਲਾ ਪੰਨਾ border-image-outset
- ਅਗਲਾ ਪੰਨਾ border-image-slice
ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ
border-image-repeat ਵਿਸ਼ੇਸ਼ਤਾ ਚਿੱਤਰ ਬੋਰਡਰ ਨੂੰ ਕਿਵੇਂ ਰੀਪੀਟ (repeated) ਕਰਨਾ ਹੈ, ਸਟ੍ਰੈਚ (stretched) ਕਰਨਾ ਹੈ ਜਾਂ ਰੌਂਡ (rounded) ਕਰਨਾ ਹੈ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ。
ਇਸ ਲਈ ਦੇਖੋ:
CSS3 ਸਿੱਖਿਆ ਪੁਸਤਕ:CSS3 ਬੋਰਡਰ
ਉਦਾਹਰਣ
ਚਿੱਤਰ ਬੋਰਡਰ ਨੂੰ ਕਿਵੇਂ ਰੀਪੀਟ ਕਰਨਾ ਹੈ ਨਿਰਧਾਰਤ ਕਰੋ:
div { border-image-source: url(border.png); border-image-repeat: round; }
CSS ਗਰੇਫਟਾਂ
border-image-repeat: stretch|repeat|round;
ਟਿੱਪਣੀਆਂ:ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਕਿਵੇਂ ਬੋਰਡਰ ਚਿੱਤਰ ਦੇ ਹੱਦਾਂ ਅਤੇ ਮੱਧ ਭਾਗ ਨੂੰ ਵਧਾਉਣ ਅਤੇ ਫੈਲਾਉਣ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ। ਇਸ ਲਈ ਤੁਸੀਂ ਦੋ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ। ਜੇਕਰ ਦੂਜਾ ਮੁੱਲ ਛੱਡ ਦਿੱਤਾ ਜਾਵੇ ਤਾਂ ਉਹ ਪਹਿਲੇ ਮੁੱਲ ਦੇ ਨਾਲ ਮੁੱਲਾਂਕਿਤ ਕੀਤਾ ਜਾਵੇਗਾ。
ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ
ਮੁੱਲ | ਵਰਣਨ |
---|---|
stretch | ਚਿੱਤਰ ਨੂੰ ਖੇਤਰ ਨੂੰ ਭਰਨ ਲਈ ਸਟ੍ਰੈਚ ਕੀਤਾ ਜਾਂਦਾ ਹੈ |
repeat | ਰੀਪੀਟ (ਮੁੱਲਾਂਕਿਤ) ਚਿੱਤਰ ਨੂੰ ਖੇਤਰ ਨੂੰ ਭਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。 |
round | ਰੀਪੀਟ ਮੁੱਲ ਦੇ ਅਨਾਰਥ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਸਾਰੇ ਚਿੱਤਰ ਨਹੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪਲੇਟਵਰਕ ਵਿੱਚ ਪਲੇਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ ਤਾਂ ਚਿੱਤਰ ਨੂੰ ਮੁੱਲਾਂਕਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਕਿ ਇਸ ਦਾ ਰੂਪ ਬਦਲ ਜਾ ਸਕੇ。 |
ਤਕਨੀਕੀ ਵੇਰਵੇ
ਮੂਲ ਮੁੱਲ: | stretch |
---|---|
ਵਿਰਾਸਤੀਕਰਣ: | no |
ਸੰਸਕਰਣ: | CSS3 |
JavaScript ਗਰੇਫਟਾਂ: | object.style.borderImageRepeat="round" |
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਪਹਿਲੀ ਸੰਸਕਰਣ ਨੰਬਰ ਪੱਤਰ ਵਿੱਚ ਦਿੱਤੀ ਗਈ ਹੈ。
ਚਰਮੋਗਾ | IE / ਐਜ਼ਕਸ | ਫਾਰਫੈਕਸ | ਸਫਾਰੀ | ਓਪੇਰਾ |
---|---|---|---|---|
15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
ਦੇਖੋ border-image ਵਿਸ਼ੇਸ਼ਤਾ。
- ਪਿਛਲਾ ਪੰਨਾ border-image-outset
- ਅਗਲਾ ਪੰਨਾ border-image-slice