Learning background gradient and rounded corner-trajectory

1. The original background gradient and text gradient CSS are written in this way.

2.

Compatible with css3 rounded corners of all browsers

3.

Css3 practical learning-creating beautiful forms (3) pure CSS background gradient

4.

Understanding css3 linear gradient

 

Based on the aboveArticleDoneCode:

HTML Structure

Code <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Title > No title page </ Title >
< Link Href = "Stylesheet.css" REL = "Stylesheet" Type = "Text/CSS"   />
</ Head >
< Body >
< Div Class = "Box" >
< Div Class = "Box_title" > < H4 > China </ H4 > </ Div >
< Div Class = "Box_ct" >
China's country is multi-party Satan's Law
</ Div >
</ Div >
</ Body >
</ Html >

 

CSS:

Code
/* Reset Style */
Body, Div, from, P, UL, ol, DL, H4, H2, H3 { Margin : 0 ; Padding : 0 ; }
Body { Font : 12px "", "Arial" ; }
IMG { Border : 0 ; }
Ul, ol, Li { List-style : None ; }
H4 { Font-size : 13px ; Font-weight : Bold ; }
. TL { Text-align : Left ; }
. TC { Text-align : Center ; }
. Tr { Text-align : Right ; }
. Dis { Display : Block ; }
. Undis { Display : None ; }

/* Box Style */
. Box
{
Width : 300px ;
Height : 300px ;
Margin : 10px auto 10px ;
Border : 1px # dfdfdf solid ;
/* Border-radius */
-Moz-border-radius : 5px ; /* Supported by Fox-radius-topleft */
-Khtml-border-radius : 5px ; /* Chrome does not support-radius-topleft, etc. */
-WebKit-border-radius : 5px ; /* Safrai3.1 */
Border-radius : 5px ; /* Opera */
Background : -WebKit-gradient (linear, 0 0, 0 20, from (# dfdfdf), to (# fff )) ;   /* WebKit engine browsers such as chrome */
Background : -Moz-linear-gradient (top, # dfdfdf, # ffffff 20px) ; /* Fox */

}
. Box_title
{
Height : 20px ;
Line-height : 20px ;
Vertical-align : Middle ;
Border-bottom : 1px # dfdfdf solid ;
Filter : Progid: DXImageTransform. Microsoft. gradient (startcolorstr = '# dfdfdf', endcolorstr = '# ffff ') ;   /* IE6, IE7 */
-MS-Filter : "Progid: DXImageTransform. Microsoft. gradient (startcolorstr = '# dfdfdf', endcolorstr = '# ffff ')" ;   /* IE8 */
}
. Box_title h4 { Margin-left : 10px ; }
. Box_ct { Padding : 10px ; Line-height : 24px ; }

 

Effects of Different browsers:

The latest effects of chrome, Fox, and Safari are as follows:

 

Opera:

 

IE6, IE7, IE8