CSS3 border-image-slice ÊôÐÔ
ʵÀý
¹æ¶¨Í¼Ïñ±ß¿òµÄÏòÄÚÆ«ÒÆ£º
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
ä¯ÀÀÆ÷Ö§³Ö
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Opera ²»Ö§³Ö border-image-slice ÊôÐÔ¡£
Internet Explorer 10 ÒÔ¼°¸üÔçµÄ°æ±¾²»Ö§³Ö border-image-slice ÊôÐÔ¡£
Safari 5 ÒÔ¼°¸üÔçµÄ°æ±¾²»Ö§³Ö border-image-slice ÊôÐÔ¡£
Çë²ÎÔÄ border-image ÊôÐÔ¡£
¶¨ÒåºÍÓ÷¨
border-image-slice ÊôÐԹ涨ͼÏñ±ß¿òµÄÏòÄÚÆ«ÒÆ¡£
ĬÈÏÖµ£º | 100% |
---|---|
¼Ì³ÐÐÔ£º | no |
°æ±¾£º | CSS3 |
JavaScript Óï·¨£º | object.style.borderImageSlice="50% 50%" |
Óï·¨
border-image-slice: number|%|fill;
×¢ÊÍ£º¸ÃÊôÐԹ涨ͼÏñµÄÉÏ¡¢ÓÒ¡¢Ï¡¢×ó²à±ßÔµµÄÏòÄÚÆ«ÒÆ£¬Í¼Ïñ±»·Ö¸îΪ¾Å¸öÇøÓò£ºËĸö½Ç¡¢ËÄÌõ±ßÒÔ¼°Ò»¸öÖмäÇøÓò¡£³ý·ÇʹÓÃÁ˹ؼü´Ê fill£¬·ñÔòÖмäµÄͼÏñ²¿·Ö»á±»¶ªÆú¡£Èç¹ûÊ¡ÂÔµÚËĸöÊýÖµ/°Ù·Ö±È£¬ÔòÓëµÚ¶þ¸öÖµÏàͬ¡£Èç¹ûÊ¡ÂÔµÚÈý¸öÖµ£¬ÔòÓëµÚÒ»¸öÖµÏàͬ¡£Èç¹ûÊ¡ÂÔµÚ¶þ¸öÖµ£¬ÔòÓëµÚÒ»¸öÖµÏàͬ¡£
Öµ | ÃèÊö |
---|---|
number | Êý×ÖÖµ£¬´ú±íͼÏñÖÐÏñËØ£¨Èç¹ûÊǹâդͼÏñ£©»òʸÁ¿×ø±ê£¨Èç¹ûÊÇʸÁ¿Í¼Ïñ£©¡£ |
% | Ïà¶ÔÓÚͼÏñ³ß´çµÄ°Ù·Ö±ÈÖµ£ºÍ¼ÏñµÄ¿í¶ÈÓ°ÏìË®Æ½Æ«ÒÆ£¬¸ß¶ÈÓ°Ïì´¹Ö±Æ«ÒÆ¡£ |
fill | ±£Áô±ß¿òͼÏñµÄÖм䲿·Ö¡£ |
Ïà¹ØÒ³Ãæ
CSS3 ½Ì³Ì£ºCSS3 ±ß¿ò