The source code is as follows
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8" />5 <title>On the box model of stripe border implementation</title>6 <style>7 HTML{8 font-family:Font-family:tahoma, Arial, Helvetica, "Microsoft Yahei New", "Microsoft Yahei", "Microsoft Jas Black", Arial, SimSun, Stxihei, "Chinese fine Black", Sans-serif;9 }Ten Div{ One width:100px; A Height:100px; - Color:#FFF; - padding:10px; the Border:dashed 10px rgba (0,0,0,.5); - Display:Inline-block; - position:relative; - margin:10px 10px; + } - . BgColor{ + Background-color:Deeppink; A } at - . BorderBox{ - Background-clip:Border-box; - } - . Paddingbox{ - Background-clip:Padding-box; in } - . Contentbox{ to Background-clip:Content-box; + } - . Bgimg{ the Background-image:URL (img/tom.jpg); * background-repeat:no-repeat; $ }Panax Notoginseng . Borderbox-after:after{ - content: ""; the position:Absolute; + Left:0; A Top:0; the Bottom:0; + Right:0; - Background-color:#FFF; $ } $ </style> - </Head> - <Body> the <!--the fill of background color is related to Background-clip - - <!--the fill rule for the background color is from the upper-left corner of the border to the lower-right corner by default -Wuyi <!--Background-clip Property Introduction - the <!--border-box: Fill background color from border - Padding-box: Fills the background color from the padding area Wu Content-box: Fills the background from the content area. - - <Divclass= "BgColor">Talking about box model Border-box from stripe border</Div> About <Divclass= "BgColor paddingbox">Talking about box model Padding-box from stripe border</Div> $ <Divclass= "BgColor contentbox">Talking about box model Content-box from stripe border</Div> - <Divclass= "BgColor contentbox">Talking about box model Content-box from stripe border</Div> - - <Divclass= "BgColor bgimg">Talking about box model Content-box from stripe border</Div> A <Divclass= "BgColor paddingbox bgimg">Talking about box model Content-box from stripe border</Div> + <Divclass= "BgColor contentbox bgimg">Talking about box model Content-box from stripe border</Div> the <Divclass= "BgColor borderbox-after">Talking about box model Border-box from stripe border</Div> - </Body> $ </HTML>
The article reproduces some interesting CSS topics (ii)--talking about the box model from the realization of the stripe border
Talking about box model from stripe border
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
