trying out background clip to see if i can isolate a gradient to just the stroke area.

Here I'm trying to use padding to move any contents of the div to the right of the x icon. It's not working how I thought it would.

I wish "multiple backgrounds" were taken further to be generic 'virtual style boxes" that had no effect on flow and were just virtual divs assigned as "backgrounds" to real Elements and upon which you could define as many backgrounds, borders, and shadows as you wanted.

Take this gradient box examle. I'd like to add a hard white edge between where the content area meets the Photoshop-ish "gradient-stroke". I can't think of any way to do that other than adding another real wrapping div and assigning a 1px stroke to that.

I'd also like a box-shadow on the X icon. Even if we could make box-shadow on an element take into consideration the transparency of the elements background image/rgba we cannot assign things to stuff in the background image...I didn't say that right.

There's another kind of gradient that looks great on strokes. I think it's called "shape" gradients. I don't remember where I saw it. I don't think photoshop has it. I do remember simulating it in photoshop using a gradient like color1-color2-color1 assigned to a stroke. I'll post a screenshot of it later.

I honestly can't wait for the day when I can get away with defining all my css via javascript. And I don't even like javascript! So many attributes can apply to each background image. Defining them as separate groups hurts my head. It seems so much easier to do something like:

@gradient1 = -moz-linear-gradient(top right -120deg, gold,yellow,goldenrod,yellow);
@gradient1hover = @gradient1;
@gradient1hover.colorStop[4] = #000;

#foo {
background[1]:url(icon.png) no-repeat 12px 33px;
background[2]: @gradient1;

#foo:hover {
background[2]: @gradient1hover;
background[1][origin]: border; 
Instead of having to repeat a significant amount of the original css just to make a small tweak for the hover state.