尽管Flex中默认的其他主题样式很容易通过css定义，但有些样式例如DataGrid每一个 column Header的分割器却不容易被定义。因为这样元素的Halo skin是可以被重载的，所以我们可以用下面的解决方案改变颜色或者完全的清除掉它。
在每一个data grid 的column header 之间有两个默认的1像素的垂直线（一条是有50％透明度的白线，另一条和border颜色一致），但是在某些例子中这个看起来是并不是太好，白色的线太明显了，或者你并不想要这个白色的垂直线。
有许多方法可以解决这个问题，DataGrid有一个css样式叫“HeaderSeparatorSkin”，我们可以创建一个1×1px 的透明gif图片代替图片。


 

 
 
   id="dg" 
  dataProvider="{feedRequest.lastResult.rss.channel.item}" 
  top="0" bottom="0" left="0" right="0" 
  headerSeparatorSkin="@Embed('/assets/transparent.gif')" >
  
  
   
   
  
 
 
 
   id="feedRequest"  
  url="http://www.cynergysystems.com/blogs/rss/andrewtrice" 
  useProxy="false"   />

另一种方法是创建一个类NullSkin，我们可以用它完全清除separators,程序化的皮肤可以继承自ProgrammaticSkin, Border or RectBorder 类，在这个例子中我们将继承自ProgrammicSkin类，重载它的measuredWidth(), measuredHeight() and updateDisplayList(w:Number, h:Number)方法：

package com.triggersoft.skins
{
  import mx.skins.ProgrammaticSkin;
  import flash.display.Graphics; 
 
  public class NullSkin extends ProgrammaticSkin
  {
    public function NullSkin()
    {
      super();
    } 
 
    override public function get measuredWidth():Number {
      return 0;
    } 
 
    override public function get measuredHeight():Number {
      return 0;
    } 
 
    override protected  function updateDisplayList(w:Number, h:Number):void {}
  }
}

在以上代码中我们返回一个0 x 0px尺寸的皮肤，updateDisplayList 方法中没做任何操作。我们可以用下面的css应用到Datagrid的皮肤中：

header-separator-skin: ClassReference("com.triggersoft.skins.NullSkin");

清除separators是个不错的处理方式，但如果我们想创建一个更加自定义化的皮肤呢？例如我们可以创建
一个和Datagrid的border同样颜色的1px宽的垂直线：
package com.triggersoft.skins
{
  import mx.skins.ProgrammaticSkin;
  import flash.display.Graphics;
 
  public class DGHeaderColourSeparator extends ProgrammaticSkin
  {
 
    public function DGHeaderColourSeparator() {
      super();
    }
 
    override public function get measuredWidth():Number {
      return 1;
    }
 
    override public function get measuredHeight():Number {
      return 10;
    }
 
    override protected  function updateDisplayList(w:Number, h:Number):void {
      var borderColor:uint = getStyle("borderColor");
      var g:Graphics = graphics;
      g.moveTo(0,0);
      g.lineStyle(1,borderColor);
      g.lineTo(0,h);
    }
  }
}

然后再设置css到我们的应用中：

header-separator-skin: ClassReference("com.triggersoft.skins.DGHeaderColourSeparator ");

[转]定义Flex DataGrid Header separators的样式（Header vertical Lines）