- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 08 Feb 2011 04:32:46 +1100
- 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 UTC