CSS3 create stunning multiple border colors

Yes, we know: we can set its width for border, the width of this border can be 5px, but 10px, can be 20px, can be random values.

But have you ever imagined that you could set a color for each 1px of border individually? What is this concept? That is, if you set a 10px border for an element, then the 10px border area, you can set 10 colors for it. Each 1px is a heavy (one group). DEMO:CSS3 border-colors Multi-group border color detailed

Well, let's have a aftertaste. How to set the border size for an element

Code:

. test{ BORDER:6PX solid #000; } <div class= "test" > Test border color Settings </div>

The code above indicates that we have defined a 6px border for a DIV element classname for test, which is, of course, a rectangle, including 4 edges.

So, this CSS code can actually be subdivided into

Code:

. test{ border-width:6px; Border-style:solid; Border-top-color: #000; Border-right-color: #000; Border-bottom-color: #000; Border-left-color: #000; }

Through the refinement of the code, we found that we can actually give the rectangle 4 edges to set the color, as to whether the color is to be set to the same or different, it depends on their own needs.

Run the refined code (you can change the color of each edge, of course) and see a rectangle with a 6px black border. Well, that's what we expect.

However, now, we can split the 6px border into 6 groups, each 1px to 1 groups, so each border can be set up to 6 different colors.

How do you do it? Take a look.

Code:

. test{ border-width:6px; Border-style:solid; Border-top-colors: #000 #fff #999 #aaa #ccc #eee; Border-right-colors: #000 #fff #999 #aaa #ccc #eee; Border-bottom-colors: #000 #fff #999 #aaa #ccc #eee; Border-left-colors: #000 #fff #999 #aaa #ccc #eee; }

Compared to the code block two, you will find that the front has not changed, just before each side can only set a single color, so use is Border-xxx-color, and now each side can set many groups of colors, so it became border-xxx-colors, become plural, this, you know I believe.

After running the code block three, "How is the code block two?" "I knew you would say so."

Oh, it's my fault because most browsers don't support multiple border colors yet. To write the date of this article demarcation, now only firefox3.6+ support, so still need to use Firefox private properties to see this effect.

Play with firefox3.6+.

Code:

. test{ border-width:6px; Border-style:solid; -moz-border-top-colors: #000 #fff #999 #aaa #ccc #eee; -moz-border-right-colors: #000 #fff #999 #aaa #ccc #eee; -moz-border-bottom-colors: #000 #fff #999 #aaa #ccc #eee; -moz-border-left-colors: #000 #fff #999 #aaa #ccc #eee; }

Believe that after running the code block four, you can relax, the effect is finally out.

Oh, maybe you should see it again.

Code:

. test{ border-width:10px; Border-style:solid; -moz-border-top-colors: #100 #300 #600 #800 #900 #a00; -moz-border-right-colors: #100 #300 #600 #800 #900 #a00; -moz-border-bottom-colors: #100 #300 #600 #800 #900 #a00; -moz-border-left-colors: #100 #300 #600 #800 #900 #a00; }

After running code block five, I want to tell you that: if Border is 10px, but only 6 sets of border colors are set, then the last set of border colors will render the remaining width. It means that the last set of border colors automatically fills the remaining width without the border color set.

Well, that's almost it, it's over.