CSS3 draws a brick wall-no image is used, and css3 draws a brick wall image
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> css3 creates a brick wall-no image is used </title>
<Style type = "text/css">
. Wall {width: 600px; height: 300px; margin: 50px auto; font-family: 'shadows Into light', cursive; text-align: center; color: #000;
Background-image:
-Webkit-radial-gradient (center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba (0.8, 0, 100% ),
-Webkit-linear-gradient (top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-Webkit-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-Webkit-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% ),
-Webkit-linear-gradient (left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-Webkit-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-Webkit-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% );
Background-image:
-Moz-radial-gradient (center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba (0.8, 0, 100% ),
-Moz-linear-gradient (top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-Moz-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-Moz-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% ),
-Moz-linear-gradient (left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-Moz-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-Moz-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% );
Background-image:
-Ms-radial-gradient (center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba (0.8, 0, 100% ),
-Ms-linear-gradient (top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-Ms-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-Ms-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% ),
-Ms-linear-gradient (left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-Ms-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-Ms-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% );
Background-image:
-O-radial-gradient (center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba (0.8, 0, 100% ),
-O-linear-gradient (top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-O-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-O-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% ),
-O-linear-gradient (left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
-O-linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
-O-linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% );
Background-image:
Radial-gradient (center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba (0.8, 0, 100% ),
Linear-gradient (top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
Linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
Linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% ),
Linear-gradient (left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px ),
Linear-gradient (45deg, # ddd 0%, # ddd 25%, transparent 25%, transparent 75%, # eee 75%, # eee 100% ),
Linear-gradient (45deg, # eee 0%, # eee 25%, transparent 25%, transparent 75%, # ddd 75%, # ddd 100% );
Background-position: 0 0, 0 0, 13px 0, 28px 15px, 0 0, 0 0, 15px 15px;
Background-size: 600px 300px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px;
Background-repeat: repeat;
}
. Wall h1 {padding: 75px; margin: 0; font-size: 50px; line-height: 50px; text-shadow: 0 5px 5px rgba (0.9, 0, 0 );}
</Style>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<Div class = "wall"> </Body>
</Html>