为div角和边框添加繁荣的技术：CSS3多个背景或边框图像？

Question

I'm 'embellishing' an existing website with some nice flourishes to the corners and borders of a content div . Without changing the markup at all (as it is generated by a CMS), how can I add 'flourish' images (ie corner flourishes like this ) and fancy borders using CSS only?

Fancy ASCII Art representation of what I want to achieve (outer border represents div):

---------------------------------------------
|                                           |
|  #%%%      ....................      %%%# |
|  %                                      % |
|  %                                      % |
|                                           |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
| .                                       . |
|                                           |
| %                                       % |
| %                                       % |
| #%%%      ....................       %%%# |
---------------------------------------------

The div can expand vertically. It needs to work across browsers (CSS3PIE is being used). And the div already has a background image.

Is CSS3 Multiple Backgrounds the way to go? Or are CSS3 Border Images the best way?

Which technique will give the best flexibility in terms of the handling the vertically expanding div as well as how far inset the borders / corners can be?

Answer 1

The syntax should be something like this:

.flourish{
width: 500px; /* just an example */
height: auto;
background-image: url(decoration1.png), url(decoration2.png), url(decoration3.png), url(decoration4.png), url(background.jpg);
background-repeat: no-repeat;
background-position: left top, right top, right bottom, left bottom, left top;
}

Kind of nasty having all those images to load... If the width is fixed then you could just have a top and bottom ornament background.

It would be even better if you could use the same image and just rotate it using css, but I am not aware of any background property to handle that.