On the code:
1 <!DOCTYPE HTML>2 <HTML>3 4 <Head>5 <MetaCharSet= "UTF-8">6 <title></title>7 <Linkrel= "stylesheet"href= "Css/normalize.css" />8 <Linkrel= "stylesheet"href= "Css/font-awesome.min.css" />9 <style>Ten One . Letter-box{ A width:278px; - Height:176px; - padding:5px; the box-sizing:Border-box; - margin:50px Auto; - } - + . Letter-border{ - width:100%; + Height:100%; A background:#fbfaf5; at } - - . Letter-box{ - width:278px; - Height:176px; - padding:5px; in box-sizing:Border-box; - background:linear-gradient (45deg, #f25953 12.5%, #fbfaf5 12.5%, #fbfaf5 25%, #5590d6 25%, #5590d6 37.5%, #fbfaf5 37.5%, #fbfaf5 50%, #f25953 50%, #f25953 62.5%, #fbfaf5 62.5%, #fbfaf5 75%, #5590d6 75%, #5590d6 87.5%, #fbfaf5 87.5%, #fbfaf5 100%); to background-size:70px 70px; + } - </style> the </Head> * $ <Body>Panax Notoginseng <Divclass= "Letter-box"> - <Divclass= "Letter-border"> the + </Div> A </Div> the + </Body> - $ </HTML>
Effect:
CSS3 Linear-gradient Implement Shopping cart address select envelope effect