CSS Background and border support

Question

Is there a Flex 4 skin or Flex 3 programmatic skin that matches CSS1, CSS2 or CSS3 background behavior?

I'm trying to add CSS like features to all Flex components.

For example, in HTML you can set the background and border of a button with the following code:

<input 
style="background:#ffffff url('img_tree.png') no-repeat right top;
border:border:5px solid red;
border-right-style:none;" 
type="button"/>

Answer 1

While you can use CSS with Flex, border doesn't seem to have any effect on S|Button at least for me. See Using Cascading Style Sheets.

example:

S|Button
{
background-image: Embed(source="assets/img-tree.png");
background-size: "100%";
border: 5px solid red:
}

So you need to look into Spark skinning: There's a simple example for a button skin on the Adobe devnet. For your needs you'll need to modify the Rect color and fill plus add a s:BitmapImage for the background. See: Introducing skinning in Flex 4 at Adobe devnet

Notice that the syntax is familiar to regular Flex syntax.