![]() In this case, since my image is 100px x 100px, the two rules above are equivalent – they slice the image in the same places. Strangely, the percentages require the “%”, while pixels should be listed without the “px”: border-image: url(my-image.gif) 25% 30% 10% 20% repeat īorder-image: url(my-image.gif) 25 30 10 20 repeat The second part can have from one to four values, much like the border-width property, and they are specified in the same order: top, right, bottom, left. For demonstration purposes I’ll use this image, which is 100px x 100px: Slicing your image The first part is easy, and is familiar from the background-image property. Let’s look at each part of the process in a little more detail. ![]() How the browser should apply those sections to the edges of your element.Where to slice that image, dividing the image into 9 sections.The border-image shorthand property has 3 parts: border-image: url(border-image.png) 25% repeat ![]() In this article, I explain how the border-image shorthand property works in today’s browsers. The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |