Various applications of CSS3 (I.)

---restore content starts---

CSS can control the layout and style of the page, CSS3 is the latest CSS standard.

One, through CSS3, you can create rounded borders, add shadows to rectangles, and replace borders with graphics. And do not need to use the design software, such as PS.

CSS3 border Boder-radius Box-shadow boder-image.

The Boder-radius property can be used to create rounded corners.

You can set specific values or percentages.

#div1 {width: 200px;           height: 100px;       Border:1px solid Blue;       Border-radius/*10px* / 10%;                  }

The Box-shadow property can add a shadow to a border.

Attribute values: X-axis offset + y-axis offset + shadow blur radius (shadow color blur) + Shadow expansion radius + shadow color + projection mode

         Div{                box-shadow: 10px 10px 5px #888888;                }

Boder-image can use pictures to make borders.

{               border-image:url (border.png) round;}

Two, CSS3 background properties.

The Background property of CSS3 is Background-size background-origin.

Before CSS3, the setting of the background is determined by the actual size of the picture. In CSS3, you can specify the size of the background image to apply to different environments.

{           background:url (bg_flower.gif);            background-size:63px 100px;            background-repeat:no-repeat; /* Don't tile . */                  }

If you set the background-size percentage, you can make the background map occupy the entire page. Auto default value, does not change the size of the picture. Cover filling the entire container

The Background-origin property specifies the location area of the picture. The picture can be placed in the Content-box Padding-box Border-box.

With the Background-origin property, you must set the Background-repeat:no-repeat

Use background-position to position the picture. Top Right left Bottom

Multiple background images and pictures with "," sub-lattice

CSS3 in Text-shadow for text shading.

H3 { Text-shadow: 5px 5px 5px  #15428B;}

Horizontal shadow, vertical Shadow, blur distance, shadow color.

Text Overflow Property

Overflow:hidden; White-space:nowrap text is hidden beyond the section, forcing no line break.

Text-overflow:clip Trim text ellipsis display ellipses instead of trimmed text

A string that customizes the symbol to replace the trimmed text.

Word-break: There are two kinds of properties word-break:break-all the word break is truncated at a certain distance.

Word-break:break-word words do not truncate

Gradient Color

Background-image:linear-gradient (to bottom,blue,red) gradient direction--start color blue, end color red

---restore content ends---

Various applications of CSS3 (I.)