Re: [css3-background] Corner clipping for images and gradients

> On Feb 7, 2014, at 9:19 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
> On Fri, Feb 7, 2014 at 1:09 AM, Sebastian Zartner
> <sebastianzartner@gmail.com> wrote:
>> In Mozilla bug 969263[1] the question came up whether to clip gradients,
>> elements and images defined in border-image. The current WD says[2] this:
>> 
>> "A box's backgrounds, but not its border-image, are clipped to the
>> appropriate curve (as determined by ¡®background-clip¡¯)."
>> 
>> According to David Baron the WG's intent for url() is when defined in
>> border-image it is allowed to *overhang* the box.
>> Though this may not be what the author expects, especially in cases where
>> gradients or elements are used. See the test case on the report mentioned
>> above.
>> 
>> One idea I can come up with to solve this is to add a new property
>> ¡®border-clip¡¯, which accepts the same values as ¡®background-clip¡¯ plus an
>> additional value, which avoids clipping, e.g. ¡®none¡¯.
> 
> Border-image does specifically overhang the border-radius curve.
> Otherwise, there's no good answer to what the outset values mean.

Right. 'border-image-offset' of greater than zero is the author saying he wants that overhang. That couldn't work if corners were clipping (or at least it would be very strange looking). But we also had good reasons for not wanting other images to be clipped by rounded corners. I recall there was significant debate, but consensus was achieved. I think we were mostly focused on url() when we decided that.

> 
> While border-image *can* be combined with gradients to make a gradient
> border, it's not the ideal in all cases, as you found.  What you'd
> want for that case is to allow <image> types in border-color.

That would be one route. Another would be to add a new value to 'border-image-offset', called 'none' perhaps, that would be just like zero, but with the clipping at the rounded corners you desire. Would be useful on raster images sometimes too, if you wanted to follow the outer edge of the border and let box-shadow provide the shadow instead of building it into the image.

Thus the values for 'border-image-offset' would be

Value:	[ <length> | <number> ]{1,4} | none

Maybe there is a better word than 'none' for this, but the working would be the same.

Received on Saturday, 8 February 2014 05:30:06 UTC