Border-gradient-colors

From Frontal Wiki

Purpose

This style is part of a group of styles used to add gradient borders to visual elements. This particular style sets an array of RGB hexadecimal color values to be used in the gradient border.

Value

The border-gradient-colors style accepts an array of hexadecimal color values. You can specify up to 15 colors.

border-gradient-colors: [ color1, color2, ... , color15 ] ;

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:

• border-gradient-type
• border-gradient-colors
• border-gradient-alphas
• border-gradient-ratios
• border-gradient-matrix
• border-gradient-spread
• border-gradient-interpolation
• border-gradient-focal-point-ratio

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 linear gradient with a five color border:

<style>
    div
    {			
	margin: auto;
	border-width: 40px;
 
	border-gradient-type: linear;
	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, 0, 0 ];
	border-gradient-spread: pad;
	border-gradient-interpolation: rgb;
    }
</style>
<div style="width: 200px; height: 200px;"/>

Can Be Applied To

This style can be applied to:

• div
• img
• text
• video
• form
• Input