flex学习笔记 皮肤（三）--关于填充的学习

首先看一个例子——checkbox的皮肤，设置复选框的样式：

 
 

??????<!--?fill?-->?
  
  

??????<s:Rect?left="2"?top="2"?right="2"?bottom="2">?

  
  
 //left top right bottom 表示到边框的距离 0就是边框 这里设置2表示填充颜色和边框之间有
  
  
1像素的间隔
  
  

??????????<s:fill>?

  
  

??????????????<s:LinearGradient?rotation="45">?

  
  

????????????<s:GradientEntry?color="0xAEB3B9"?alpha="1.0"/>?

  
  

????????????<s:GradientEntry?color="0xF2F2F2"?alpha="1.0"/>?

  
  

????????????<s:GradientEntry?color="0xFFFFFF"?alpha="1.0"/>?

  
  

??????????????</s:LinearGradient>?

  
  

??????????</s:fill>?

  
  
// fill指填充颜色 linearGradient值填充线性渐变颜色 rotation指颜色渐变的方向 默认0 从左到右
  
  
 这里是在填充区域里从左上角到右下角填充了3个颜色的渐变效果
  
  

??????</s:Rect>?

  
  
//以下是在填充渐变颜色的基础上，给填充区域填充一个stroke,stroke是线条的意思（就像画了一个
  
  
 边框） 
  
  

<!--?layer?6:?highlight?stroke?(all?states?except?down)?-->?

  
  

<s:Rect?left="2"?right="2"?top="2"?bottom="2"?excludeFrom="downStates">?

  
  

????<s:stroke>?

  
  

????????<s:LinearGradientStroke?rotation="225"?weight="1">?

  
  

????????????<s:GradientEntry?color="0xFFFFFF"?alpha.overStates="0.33"?/>?

  
  

????????????<s:GradientEntry?color="0xFFFFFF"?alpha="0.12"?alpha.overStates="0.0396"?/>?

  
  

????????</s:LinearGradientStroke>?

  
  

????</s:stroke>?

  
  

</s:Rect>?

 
 

效果如下：