10 days proficient in CSS3 (2)

Fillet effect Border-radius

Border-radius is to add a rounded border to an element.

How to use:

border-radius:10px; / * All corners use rounded corners with a radius of 10px * /

border-radius:5px 4px 3px 2px; / * Four RADIUS values are upper-left, upper-right, lower-right, and lower-left corner, clockwise * /

Do not think that the value of Border-radius can only be used in px units, you can also use a percentage or em, but compatibility is not very good.

Solid Upper semicircle:

Method: The height is set to half the width and the radius of the upper-left and upper-right corner is the same as the height of the element (greater than is also possible).

div{    height:50px;/* is half the width of */    width:100px;    Background: #9da;    border-radius:50px 50px 0 0;/* radius set at least the value of height */    }

Solid Circle:
Method: Set width and height values to be consistent (that is, squares), and four fillet values are set to half of their values. The following code:

div{    height:100px;/* and Width set consistent */    width:100px;    Background: #9da;    border-radius:50px;/* four rounded values are set to half the width or height of the value */    }

Shadow Box-shadow (i)

Box-shadow is to add a shadow to the box. Support for adding one or more.

A very simple piece of code, the implementation of the projection effect, cool. Let's look at the syntax:

Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];

Parameter description:

Note: Inset can be written on the first or last of the parameters, and other positions are invalid.

To set an outer shadow for an element:

Example code:

.  box_shadow{ box-shadow:426#}       

Effect:

To set an inner shadow for an element:

Example code:

.  box_shadow{ box-shadow:426#333333 inset}   

Effect:

To add multiple shadows:

The above syntax, as simple as this, if you add multiple shadows, just separated by commas. Such as:

. box_shadow{    box-shadow:4px 2px 6px #f00, -4px-2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

Effect:

Shadow Box-shadow (ii)

1. The difference between shadow blur radius and shadow expansion radius

Shadow Blur radius: This parameter is optional, its value can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

2, X-axis offset and y-axis offset can be set to negative number

Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];

The x-axis offset is a negative number:

. boxshadow-outset{    width:100px;    height:100px;    box-shadow:-4px 4px 6px #666;}

：

The y-axis offset is a negative number:

. boxshadow-outset{    width:100px;    height:100px;    Box-shadow:4px-4px 6px #666;}

：

Apply a picture to a border border-image

As the name implies, the background image is applied to the border, which is similar to our usual background properties. For example:

Background:url (xx.jpg) 10px 20px no-repeat;

But it's a little more complicated than a background picture.

Imagine: A rectangle with four borders. If a border picture is applied, how is the picture distributed? The picture is automatically cut into four equal portions. Used for four borders. It can be understood as a slicing tool that automatically cuts the picture used as a border. How to cut it? To facilitate understanding, made a special picture, composed of 9 rectangles (70*70 pixels) of a picture (210*210 pixels), and labeled good serial number, is not like the legendary nine diagram, as follows:

Let's apply it as a border image and see what the effect is.

According to the syntax of Border-image:

#border-image{   background: #F4FFFA;   width:210px; height:210px; border:70px solid #ddd;    Border-image:url (borderimg.png) repeat  }

Effect:

From the serial number you can see that the four corners of the div correspond to the four corners of the background image respectively. and  be repeated. where is 5? because the image is cut from around the center, 5 is not displayed. And in the Chrome browser 5 is present, the appearance:repeat meaning is repeated, at present because is precisely divides evenly, the effect does not see. If you change the width of the Div, look at the effect of repetition:

The corner part is cut off, visible repeat is repeated, then out of the partially trimmed off, and is centered to start repeating.

Round Parameters : Round can be understood as a complete paving. Compressed (or stretched) to achieve completeness;

#border-image {     width:170px;     height:170px;     border:70px solid;     Border-image:url (borderimg.png) round; }

Effect:

The visible picture is squashed.

Stretch is very good to understand is stretching, how long pull how long. How far "roll" is.

Border-image:url (borderimg.png) stretch

Look at the effect:

2,4,6,8 are stretched to show respectively.

Note: Under Chrome, the middle section is also stretched, and the WebKit browser does not seem to differentiate between the round property and the Repeat property, and the display works the same.

Firefox 26.0 can be accurately differentiated.

10 days proficient in CSS3 (2)