Detailed explanation of some example usage codes of Border properties in css3

There are three properties related to Border in CSS3: rounded border-radius, picture border border-image, and multi-color border border-color. Among them, rounded border-radius is a commonly used property, and many websites now Border-radius is used to create rounded corners.

 /*我们可以分别给各边上色*/
  border-top-color: <color>/*给上边框上色*/
  border-right-color: <color> /*给右边框上色*/
  border-bottom-color:<color> /*给下边框上色*/
  border-left-color: <color> /*给左框上色*/

The above shows how to color the border of an element. Everyone knows that this can give the border a unique color. But if we want to add different colors to the border, for example, add a gradient color to the border, or a color, then our previous method cannot do anything, so what should we do? In order to achieve such an effect, CSS3 has introduced other methods Its own border-color attribute, but so far only Firefox 3.0+ browsers support this attribute. It is also because of this that the application of CSS3 border-color is quite rare. As far as I know, there is no project that uses CSS3's border-color to achieve special border effects. But this will not affect the enthusiasm of us CSS3 enthusiasts to learn the various properties of CSS3. Let's continue below and see how to use CSS3's borderder-color.

Let’s take a look at the writing rules of its grammar

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
  -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
  -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
  -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

From the above grammar rules, we write the four sides of the element separately, but there is one difference from CSS2. , in CSS3 we use border-top-colors, border-right-colors, border-bottom-colors, border-left-colors, where colors is a plural number, but in CSS2 they are all border-top-color, border-right-color, border-bottom-color, border-left-color. Everyone must remember this, in CSS3 it is "colors"

When using the border-color property of css3, if your border width is set to X px, then you can use X on the border colors, each color is a px at this time. If your border width is set to 10px, and you only use three or four colors, the last color will fill the width behind it.

.demo {   
    width: 200px;
   height: 100px;
   border: 5px solid transparent;
   -moz-border-top-colors: red blue white white black;
   -moz-border-right-colors: red blue white white black;
   -moz-border-bottom-colors: red blue white white black;
   -moz-border-left-colors: red blue white white black;       
 }

You can also use this attribute to create a gradient border effect

.demo1 {    
      width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

The above is the detailed content of Detailed explanation of some example usage codes of Border properties in css3. For more information, please follow other related articles on the PHP Chinese website!