I am currently trying to use CSS's border-image to apply a custom border to a div. I feel like I have all the right code, but my image isn't being displayed as the border. Could someone take a look at this html/css code and tell me what I'm doing wrong?
HTML:
<div id="box">
</div>
CSS:
body { text-Align: center; } /* CENTER ALIGN FOR IE */
#PC_Attack_Lightbox {
/*** CENTER ALIGN BOX ***/
text-Align: left;
margin: 0 auto;
/*** SET WIDTH & HEIGHT ***/
width: 500px;
height: 500px;
background: #EBF5FF; /* SET BG */
/*** APPLY BORDER-IMAGE ***/
border:35px outset brown;
-moz-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
-webkit-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
}
because you use box div and your write css on #PC_Attack_Lightbox so use PC_Attack_Lightbox
<div id="PC_Attack_Lightbox">
</div>
<div id="PC_Attack_Lightbox">
// your code here
</div>
body { text-Align: center; } /* CENTER ALIGN FOR IE */
#PC_Attack_Lightbox {
/*** CENTER ALIGN BOX ***/
text-Align: left;
margin: 0 auto;
/*** SET WIDTH & HEIGHT ***/
width: 500px;
height: 500px;
background: #EBF5FF; /* SET BG */
/*** APPLY BORDER-IMAGE ***/
border:35px outset brown;
-moz-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
-webkit-border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
border-image:url(img/wood2.jpg) 25 30 10 20 repeat;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.