- Theory
- Theory
- Comments
Slicing Asymmetrical Images
Compare the following two images:
You can set the same margins for the slicing lines of 50px to slice the first image. This is clearly not enough for the second image, since it is less symmetrical.
You can set different margins for the slicing lines using border-image-slice. To do this, you need to assign space-separated values in the following order: top, right, bottom, left. Example:
border-image-slice: 10 20 30 40;The middle part of the image is usually not used. But if you add the keyword fill to the property value, then the middle part of the image will be displayed in the middle area of the frame: It will cover the background of the block, but it will not cover up the content. Example:
border-image-slice: 10 20 30 40 fill;- index.html
- style.css
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
- Change the frame image to
img/border-img-irregular.pngfor.portrait, - and then change the image slicing for the frame to
50 50 65 40. - and add the keyword
fill.
Comments