CSS3 round corner, box shadow and border picture detailed details

Start sorting out CSS3 's knowledge today.

In fact, it should be written last night, but it seems to be acute gastroenteritis, the pain of the night did not sleep, blue-thin mushrooms
Fortunately, today drip sleep, it seems that this food is better to pay attention to, by my gastrointestinal revenge
CSS is not difficult, but look at the same time you want to try on the browser, try to remember
Look at the light, not the white.

CSS3 There are compatibility issues with each browser
Private properties with different prefixes for different browsers, indicating that properties or rules have not yet become standard
In other words, when the official has not published the standard, each browser has sneak realized
But the true standard of the future does not necessarily look like, how to do, then add the prefix it
Although now the new version of the browser does not prefix, but to ensure compatibility or write

Browser	prefix
Chrome/safari	-webkit
Firefox	-moz
Ie	-ms
Opear	-O

Border-radius rounded Corners

Radius this word is the meaning of radius
To achieve this effect before CSS3, the best way is to use Photoshop only.
This property allows us to add "rounded corners" to our elements.
Like we turn an element into a circle

<p class= "Demo" ></p>

. demo {    width:100px;    height:100px;    Background-color:gold;    border-radius:50%;}

Why is the value of the Border-radius attribute value 50% becomes a circle?
With our understanding of CSS it must be a composite property which is equivalent border-radius: 50% 50% 50% 50%;
Border-radius can be split into

• Border-top-left-radius: The arc in the upper-left corner of the border

• Border-top-rigtht-radius: Radian in upper right corner of border

• Border-bottom-left-radius: The radian in the lower left corner of the border

• Border-bottom-rigtht-radius: Radians in the lower-right corner of the border

So it's equivalent to the code below, but let's not write the trouble.

. demo {    width:100px;    height:100px;    Background-color:gold;    border-top-left-radius:50%;    border-top-right-radius:50%;    border-bottom-left-radius:50%;    border-bottom-right-radius:50%;}

Take this for a while. border-top-left-radius: 50%

In fact, it is equivalent to sitting on the element box to draw a rectangle, the width of the rectangle is half the element (50%)
and draws an arc at the center of the point close to the interior of the element
So four attributes together, it becomes a circle.

This property can also be more complex
The following code is equivalent

. demo {    width:100px;    height:100px;    Background-color:gold;    border-top-left-radius:10px 20px;    border-top-right-radius:20px 30px;    border-bottom-right-radius:30px 40px;    border-bottom-left-radius:40px 50px;}

. demo {    width:100px;    height:100px;    Background-color:gold;    border-radius:10px 20px 30px 40px/20px 30px 40px 50px;}

Note that the order is clockwise: upper left, upper right, lower right, lower left
This kind of insane writing is really not common.
Child properties appear to be composite properties border-top-left-radius: 10px 20px;
But not really, curious I tried a little bit to find border-top-left-radius-x this attribute
The first number represents the distance of the rectangle's x-axis direction, and the second number represents the distance from the y-axis of the rectangle.
Don't let the top-left in front mislead you.
All similar properties in CSS are in the x-axis, and the y-axis is behind
For example background-position , a composite property is background-position-x in front, background-position-y

Through this playful property, we can do semicircle

. demo {    width:200px;    height:100px;    background-color:orangered;    border-radius:100px 100px 0 0/100px 100px 0 0;}

Make a leaf

. demo {    width:200px;    height:100px;    Background-color:greenyellow;    border-radius:200px 0 200px 0/100px 0 100px 0;}

Similar to our padding, margin and other composite properties

Write a value of 1 –>/// border-radius: 10px
Write a value of 2 border-radius: 10px 20px –>/,/
Write 3 values border-radius: 10px 20px 30px –>,/,
Write a value of 4 –>,,, border-radius: 10px 20px 30px 40px

I believe you know what I mean.

Box-shadow Box Shadow

I'll add a line of code to the leaves we wrote above.

. demo {    width:200px;    height:100px;    Background-color:greenyellow;    border-radius:200px 0 200px 0/100px 0 100px 0;    box-shadow:10px 20px;}

The effect of the shadow, the property value is the x-axis offset and the y-axis offset
There are also optional attribute values: Shadow Blur radius, shadow expansion radius, shadow color, projection mode
At the same time a box can have multiple shadows, separated by commas.

. demo {    width:200px;    height:100px;    Background-color:greenyellow;    border-radius:200px 0 200px 0/100px 0 100px 0;    box-shadow:20px 20px 5px 5px Green, 40px, 40px 5px 5px                ;}

As for the projection method, the default is external projection, we can set the property value inset into the inner projection
Like the effect of one months of eating.

. demo {    width:200px;    height:200px;    Background-color:black;    border-radius:50%;    box-shadow:40px 40px 0 0 yellow inset;}

Border-image Border Picture

First I need a resource for the border picture

The size of the picture I took was 81px*81px.
Border-image is also a composite property, and the child attributes have these

• Border-image-source: Image source Path

• Border-image-slice: Specifies an inward offset of the image's bounds

• Border-image-repeat: How to tile a border image

• Border-image-width: Border Width
  (Border-image-outset not to speak)

. demo {    width:54px;    height:54px;    border:27px solid transparent;    Border-image:url (' Border.png ');}

It would be strange to just write a picture resource.

Let's first add the clipping property value

. demo {    width:54px;    height:54px;    border:27px solid transparent;    Border-image:url (' border.png ') 27;}

Note that it has no units (default px) and can also be used as a percentage
Here the 27 means that the picture four directions (upper and lower left) are cut from the outward 27px into a nine Gongge

Then put the four corners of the picture into the four corners of the border
Stretch (default) the rest of the remainder (the middle throw away) to the rest of the border
If you want to crop different pixels, you can write them separately

Like border-image: url('border.png') 10% 20% 30% 40%;
Nine Gongge will be divided into this way.

Tiling way There are several

• Stretch stretching

• Repeat Tile

• Round (Damper shop)

The default is stretch stretching
Now I'm going to change the width of the box to 200px, and then compare the three different ways.

. demo {/*① Stretch */    width:200px;    height:54px;    border:27px solid transparent;    Border-image:url (' border.png ') stretch;}

Stretching is the adaptation of the picture.

. demo {/*② Tile */    width:200px;    height:54px;    border:27px solid transparent;    Border-image:url (' border.png ') repeat;}

The tile places the cropped picture in the middle, and then repeats it to both sides.

. demo {/*③ covered with */    width:200px;    height:54px;    border:27px solid transparent;    Border-image:url (' border.png ') round;}

It is paved with a combination of stretch and peace, which does not result in the cutting effect above (no vainly disobey feeling)
Of course, it repeats as many squares as possible.

We can adjust the width of the border picture again
For example, I need to adjust to 20px.
Add '/' to the width value you want to adjust after clipping the property value

. demo {    width:200px;    height:54px;    border:27px solid transparent;    Border-image:url (' border.png ') 27/20px round;}

It's not a summary today, it's all up there.