Border-gradient-focal-point-ratio

From Frontal Wiki

Jump to: navigation, search
This page is PENDING

Contents

Purpose

This style is part of a group of styles used to add gradient borders to visual elements. This particular style sets the focal point ratio, a number that controls the location of the focal point of the gradient. It is used only when border-gradient-type is set to radial.

Value

The border-gradient-focal-point-ratio style accepts decimal values between -1 and 1. A "0" value means that the focal point is in the center. "1" means that the focal point is at the outer-most edge of the gradient circle. "-1" means that the focal point is at the opposite outer-most edge of the gradient circle. The default value is not set, though "0" should be used most often. 

bg-gradient-focal-point-ratio: 0;


This style is cascading.

Remarks

In order to create a gradient border, the border-gradient-type, border-gradient-colors and border-gradient-matrix styles must be set.

The entire group of styles is:

Moreover, border-gradient-type must be set for the particular visual element that is to have the gradient background. (All of the other styles are cascading.) This style relates to Flash's lineGradientStyle method and its documentation should be consulted.

Example

Here is an example of a radial gradient with a five color border: 

<style>
    div
    {			
	margin: auto;
	border-width: 100px;
 
	border-gradient-type: radial;
	border-gradient-colors: [ 0xFFFF00, 0xFF6600, 0xFF0000, 0xFF00FF, 0x0000FF ];
	border-gradient-alphas: [ .5, .5, .5, .5, .5 ];
	border-gradient-ratios: [ 0, 50, 90, 180, 255 ];
	border-gradient-matrix: [ 200, 200, .785, -75, -75 ];
	border-gradient-spread: pad;
	border-gradient-interpolation: rgb;
	border-gradient-focal-point-ratio: 0;
    }
</style>
<div style="width: 50px; height: 50px;"/>


Can Be Applied To

This style can be applied to:

Retrieved from "http://www.frontalcode.com/wiki/index.php/Border-gradient-focal-point-ratio"
Personal tools
Get Adobe Flash player