Getting started with css3

Css3 provides a rich selection of styles. Due to browser problems, some new styles need to be loaded with prefixes for different browsers to recognize.

Firefox:-moz-

Chrome:-WebKit-

Opera:-o-this is cute.

Safari:-WebKit-

IE:-MS-

Border

Let's start with the new border style. The new border style provides customizable corner, shadow, and image border control. Let's take a look at a simple case.

div{    width: 100px;    height: 100px;    border-style: solid;    border-width: 15px 2px 5px 3px;    border-top-left-radius: 10px 20px;    border-top-right-radius: 15px;    border-bottom-right-radius: 20px 10px;    border-bottom-left-radius: 30px 15px;}

The code above describes a rectangle with an arc angle and shadow. The arc angle is x/y, X is the horizontal radius, and Y is the vertical radius. If y is not set, y = x. Radius can be abbreviated together.

div{    width: 100px;    height: 100px;    border-style: solid;    border-width: 15px 2px 5px 3px;    border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px; }

Let's see the shadow.

 div {     width: 100px;     height: 100px;     border-style: solid;     border-width: 15px 2px 5px 3px;     box-shadow: -3px 3px 2px 2px rgb(10,20,30); }

Value formats: Projection Method X axis offset Y axis offset shadow blur radius shadow extended radius shadow color
If the XY value is positive, the shadow is on the right of the object. If the XY value is negative, the shadow is on the left of the object.

The default projection method is the external shadow. If you want to set it, it must be inset.

div{    width: 100px;    height: 100px;    border: 12px solid blue;    background-color: Orange;    border-top-left-radius: 60px 90px;    border-bottom-right-radius: 60px 90px;    box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;}

Then there is a border image, which is a little inintuitive

div{    width: 100px;    height: 100px;    border-style: solid;    border-width: 15px 2px 5px 3px;    -webkit-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;    -moz-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;}

The above code is to cut the image into nine parts in the order of top right and bottom left (15px 3px 5px 3px but not the unit, which is PX by default), and the four corners are not moved, all others are stretched and deformed according to the width and height.

The deformed parameters include stretch/round/Repeat/space. You can set x y or X, that is, x = y.

Backgrounds

Css2 places a tiled image in the direction of X and Y for processing Beijing images. Now we can select a new background image size method.

div{    width: 530px;    height: 330px;    background-image: url(http://www.witshare.org/css/images/mm_light.png);    background-size:cover;    background-repeat:no-repeat;}

Use size to adapt the image to the element size: Cover: this value is used to enlarge the image to fit the entire container. This value is mainly used when the image is smaller than the container, you cannot use background-repeat to implement the current situation. You can use cover to enlarge the background image to the appropriate container size,
Contain: this value is the opposite of cover. It is mainly used to narrow down the background image to fit the entire container. This value is mainly used when the background image is larger than the element container, however, we need to display all the background images. In this case, we can use contain to narrow down the image to the appropriate container size. Both methods use image distortion.

You can also locate the location and region of the background.

div{    width: 100px;    height: 100px;    padding: 20px;    border: solid 30px red;    background-color: Lime;    background-image: url(http://www.witshare.org/css/images/mm_light.png);    background-repeat: no-repeat;    -moz-background-origin: padding;    -webkit-background-origin: padding;    -moz-background-origin: padding-box;    -webkit-background-origin: padding-box;    -o-background-origin: padding-box;    background-origin: padding-box;}

The above features can overlap multiple image sources. The following case describes how to fold three cards (why do I use cards each time ?)

div{    width: 300px;    height: 300px;    background-image: url(img/club/10.png), url(img/diamond/9.png),url(img/spade/8.png);    background-repeat: no-repeat;    background-position: 0px 0px,3px 20px,6px 40px;    background-origin: content-box;}

Text

Take a look at the demo

span{    text-shadow: 5px 5px 5px #FF0000;    word-wrap: break-word;    text-overflow: ellipsis;}

The Shadow parameter is The Blur color of the X axis and Y axis.

A line feed is a line feed within the boundary.

If the text overflows, there are two clip values: Ignore mark (...) is not displayed, but simple cropping. Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)

Font

In the past, we tried to use standard fonts. We should consider that the fonts we designed were not installed on the client. Now css3 supports online fonts.

The following is a pretty font of Google.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"><style>    span    {        font-family: 'Tangerine' , serif;        font-size: 48px;    }</style>

For More Google fonts, see Google Web Fonts.

Transforms

Automan, starting from deformation. Css3 supports 2D deformation.

The following code describes how to rotate clockwise.

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: rotate(15deg);    -ms-transform: rotate(15deg);    -webkit-transform: rotate(15deg);    -o-transform: rotate(15deg);    -moz-transform: rotate(15deg);}

The following figure shows how to move along the XY axis. You can set it through translatex/y.

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: translate(10px,100px);    -ms-transform: translate(10px,100px);    -webkit-transform: translate(50px,100px);    -o-transform: translate(10px,100px);    -moz-transform: translate(10px,100px);}

Zoom: the zoom value is a multiple. The following code gets a rectangle of 200*100. You can also refine the values by using scalex/y.

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: scale(2,1);    -ms-transform: scale(2,1);    -webkit-transform: scale(2,1);    -o-transform: scale(2,1);    -moz-transform: scale(2,1);}

Distortion is performed by describing the angle on XY, which can also be refined by XY.

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: skew(10deg,20deg);    -ms-transform: skew(10deg,20deg);    -webkit-transform: skew(10deg,20deg);    -o-transform: skew(10deg,20deg);    -moz-transform: skew(10deg,20deg);}

Matrix deformation. The elements are completely relocated using six values.

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);    -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);}

Center for Deformation

div{    width: 100px;    height: 100px;    background-color: Orange;    transform: rotate(45deg);    transform-origin: 20% 40%;    -ms-transform: rotate(45deg);    -ms-transform-origin: 20% 40%;    -webkit-transform: rotate(45deg);    -webkit-transform-origin: 20% 40%;    -moz-transform: rotate(45deg);    -moz-transform-origin: 20% 40%;    -o-transform: rotate(45deg);    -o-transform-origin: 20% 40%;}

You can also give time and Event Control for a deformation action.

Transition mainly includes four attribute values: the attributes for performing the transformation: Transition-property, and the duration of the Transformation: Transition-duration. during the duration of the Transition, the rate change of the transformation is transition-timing-function, transformation delay time transition-delay.

There are 6 possible values for the value conversion rate
Growth slows down by 0.25, 0.1, 0.25, 1.0
Linear Constant Speed: 0.0, 0.0, 1.0, 1.0
Memory-in acceleration 0.42, 0, 1.0, 1.0
Slow-out deceleration 0, 0, 0.58, 1.0
Slow-in-out acceleration and then slow down 0.42, 0, 0.58, 1.0
Cubic-bezeiser

Transition-delay is used to specify the time when an animation starts to be executed, meaning how long it takes to start performing the transition effect after the element attribute value is changed.

The following is a simple case

div{    width: 100px;    height: 100px;    background-color: Orange;    transition: width 2s, height 2s;    -moz-transition: width 2s, height 2s, -moz-transform 2s;    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;    -o-transition: width 2s, height 2s, -o-transform 2s;}div:hover{    width: 200px;    height: 200px;    background-color:Blue;    transform: rotate(360deg);    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);}

The following code describes different acceleration conditions:

<! Doctype HTML> <HTML lang = "ZH-CN"> 
Of course, css3 also provides the real animation processing method animation. Like many other animation technologies, animation uses the key frame keyframes, but has a lot of control, next time I write a CSS animation independently.

Columns
We have discussed that web pages are documents, and the element layout on documents is very important. We often need to arrange the text in vertical bars. Now css3 is supported. However, ie9 does not.
The columns of CSS supports multiple columns, column margins, column borders, and exaggerated columns. The following code describes these implementations.

<Head> <title> </title> <style type = "text/CSS"> Article {-moz-column-count: 5;-WebKit-column-count: 5; column-count: 5;-moz-column-width: auto;-WebKit-column-gap: 5px; -Moz-column-gap: 5px; column-gap: 5px;-WebKit-column-gap: 20px;-moz-column-gap: 20px; column-gap: 20px; -Moz-column-rule: 5px solid red;-WebKit-column-rule: 5px solid red; column- Rule: 5px solid red;} H1 {Background: orange; border-bottom: 3px double; margin: 5px 0;-WebKit-column-Span: All; -Moz-column-Span: All; column-Span: All ;}</style> 

The simple introduction to CSS is here. Take a break and have the opportunity to continue further discussions.