CSS3 creates multiple borders

Yes, we know: We can set its width for border. The width of this border can be 5px, but 10px, 20px, or random value.

However, have you ever imagined that you can set a color for every 1px border? What is this concept? That is to say, if you set a 10px border for an element, you can set 10 colors for the 10px border area. Every 1px is a heavy weight (group ). DEMO: css3 border-colors multi-group border color details

Well, let's review how to set the border size for the element (code block 1 ):

 

 

The above Code defines a 6px border for a div element whose className is test. Of course, this is a rectangle with four sides.

As a result, the CSS code can be refined to (code block 2 ):

 

 

After the code is refined, we can set the color for the four sides of the rectangle. Whether the color is set to the same or different depends on your needs.

Run the refined code (of course you can change the color of each edge) to see a rectangle with a 6 PX black border. Well, this is what we expected.

However, now we can split the 6 PX border into 6 groups, each of which is 1 group, so each border can be set to a maximum of 6 different colors.

How? Check it out (code block 3 ):

 

. 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;

}

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page