How the CSS3 border property is used

This time to bring you CSS3. How to use the border property, the use of CSS3 border properties of the note, the following is the actual case, together to see.

The border (Border) in the CSS3. This is no stranger to us. How many times have you written down border:1px solid red? So what surprises will it bring to us in CSS3?

In CSS3.4 new features in the border

1.border-color (set border color)

2.border-image (set to border by picture)

3.border-radius (radius of border)

4.box-shadow (Shadow effect)

And I'm using the browser version: IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50 ... Basic is the latest version.

We're going to write this when we add a border to p.

Border-color


Now that we can set the color of the border, why do we have to border-color it? Because the border of CSS3 is different.

Use Border-color If you set the border width to be x. Then you can use the X color on this frame, and each color will show the width of the 1px. (PS: If your border width is 10px, and you only set 5 colors, then the last color will fill the remaining width)

See the following code for specific wording


But the results are not the same as we thought.


We've only seen 4 borders that correspond to 4 colors respectively.

Of course, if we only enter 3 colors, the middle of the color corresponding to the left and right, the specific self-test it.

So what did we say about the effect of one color per pixel? Don't worry. " Then you can use the X color on this side of the box. Because the border-color is for the entire 4 border, it is not for a border.

If we need to do the above effect, we can set it for a certain border. They were:


  

 
   
 
    
Border-top-color
 
    
Border-right-color
 
    
Border-bottom-color
 
    
Border-left-color
 
   

  
So we need to change the code.


After running


The effect came out of the wood there? Although it is not clear, but it is true that each pixel a color, so if we want to do a gradual change in color, it is much easier, just need to adjust the color just fine


. border_test        {            border:5px solid red;             -moz-border-top-colors:blue Yellow Red Black Green;            -ms-border-top-colors:blue Yellow Red Black Green;            -wekit-border-top-colors:blue Yellow Red Black Green;            -o-border-top-colors:blue Yellow Red Black Green;            Border-top-colors:blue Yellow Red Black Green;        }
But found that only the effect on Firefox, that is, the border-border-colors This property is available only on Firefox, other incompatible. It's a pity.

Border-image

Border-image is mainly filled with pictures to fill the border.

The decomposition properties of the Border-image are


   

 
    
 
     
BORDER-IMAGE-SOURCE Specifies the URL of the border background map
 
     
Border-image-slice set the properties of how the picture is cut, non-locating!
 
     
Border-image-width defines the display area of the border-image.
 
     
Border-image-repea
 
    

   
Let's analyze it one by one.

Border-image-source

This is the URL of the background map for the specified border, for example

Border-image-source:url (.. /images/border.gif);
This can be set to none, i.e. no background map

Border-image-slice

Set the properties of how the picture is cut, (focus on understanding) His value is four values, no units (actually fixed is PX, note that this value can not be negative or larger than the size of the picture), for example: Border-image-slice:1 2 3 4; You are right, the same corresponds to the "upper right Bottom left", will these values, the background image, cut out, a specific will say

Border-image-width

Define the width of the border-image, this is the definition of the Border-image display area (this is only described on the world, but in the actual test, set this property does not work, but border-width can take effect)

Border-image-repeat;

Repeat has three values selected

[Stretch | repeat | round]: stretching | Repetition | Tile (where stretch is the default value.) )

Well, we'll look back at slice, which is cutting. = = Honestly, don't know what to say, or not.


Left is one of these styles. border-image-slice:10 15 20 25; He will split the picture into a 9-cell picture like the top right.

Left,top,right,bottom is the distance you set, and this part will be drawn out as a border.

Top-left, Top-right, Bottom-left, bottom-right are also extracted, and unlike Left,top,right,bottom, they are not affected by repeat,stretch,round.

And Left,top,right,bottom, it is possible to change the width and height because of the stretching. I wonder if it will be easy to understand?

See the code below


The effect is as follows


The material map used is


Also unfortunately, I only have Firefox and safari out of the effect, of course, this can not sort chrome can not, because heard there are several versions of the can.

Border-radius

Finally to the fillet, feeling spent so many words to write CSS3 a bit strange, because it was very simple--ha

Border-radius

Parameters: Radius, can not be negative, 0 is right angle


Effect


Fillet effect is more common, and in Firefox,chrome,safari,opera all support round corner effect, unfortunately, ie can only go back to porridge. But IE9 is said to have supported it.

Related properties: Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius, Border-top-left-radius

One for each position, note that if there is only one, it will turn into a 4-point 1 fillet, and if one of the 4 is 0, then it will turn back into a right angle-I am also very puzzled.

Box-shadow

The last one, the shadow



Three pixel values and colors are

Shadow horizontal offset value (preferably positive or negative value), Shadow vertical offset value (positive or negative value); shadow blur value; Shadow color

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

BFC Mode

What is the difference between href and src, link, and @import?

How property value inheritance in CSS is used