W3C home > Mailing lists > Public > www-style@w3.org > February 2011

Re: 'border-image' confusion

From: Alan Gresley <alan@css-class.com>
Date: Tue, 08 Feb 2011 04:32:46 +1100
Message-ID: <4D502CBE.603@css-class.com>
To: Brad Kemper <brad.kemper@gmail.com>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Simon Fraser <smfr@me.com>, "Eric A. Meyer" <eric@meyerweb.com>, "www-style@w3.org" <www-style@w3.org>
On 8/02/2011 3:26 AM, Brad Kemper wrote:
>
> On Feb 6, 2011, at 9:10 PM, Tab Atkins Jr. wrote:
>
>> On Sun, Feb 6, 2011 at 3:41 PM, Simon Fraser<smfr@me.com>  wrote:

>>> I actually have no idea how a gradient should respond to slicing
>>> for border-image. WebKit has bugs, but I'm not sure what the
>>> expected behavior is.
>>
>> A gradient is an image, and once it's used, it has a definite
>> size. It should act exactly like any other image of that size.
>> There's no magic behavior here.
>
> Actually, I'm not seeing anything in Backgrounds&  Borders 3 that
> says how to dimension an image that has no intrinsic dimension. It
> should be the same size as the border image area[1]. Maybe we need to
> say that somewhere, or say it more explicitly if it is implied in
> there somewhere and I'm just missing it.

> 1. http://dev.w3.org/csswg/css3-background/#border-image-area


Brad, gradients work the same as background-image. I discovered it only 
today. As Tab has said, there no magic behavior here. This is possible.


<!DOCTYPE html>

<style type="text/css">
div {
height: 200px; width: 200px;
-moz-border-radius: 100px 100px;
background: #385179 -moz-radial-gradient(rgba(255,255,255,1), 
rgba(56,81,121,0)) -50px -50px no-repeat;
-moz-background-size: 250px 250px;
}
</style>

<div></div>


Also is this.

<!DOCTYPE html>

<style type="text/css">
div {
height: 200px; width: 200px;
-moz-border-radius: 100px 100px;
background: #385179 -moz-radial-gradient(rgba(56,81,121,0), 
rgba(255,255,255,1)) -100px -100px;
-moz-background-size: 150px 150px;
}
</style>

<div></div>




-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Monday, 7 February 2011 17:33:23 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT