This code is recommended to me for a section of the Udsky with the picture version of the fillet code, so the analysis code to write a tutorial, this code the greatest advantage is: only a picture, code simple, very easy to use. The disadvantage is that you do this corner box in the background area for a single color! Let's go straight to the point!
Prepare a picture (the background we want to use, the four corners are shown in the four parts of this background figure). When I first learned about rounded corners, I Centia a one-fourth circle, then rotate/flip the background image can be used in four corners, but the CSS does not have this function, had to give up this impractical idea!
Fillet part enlarge diagram:
HTML code:
Thinking: Box Cssbox into two box, the upper part of box made two corners (Cssbox_head right corner, H2 left corner), the next part of Box also do a corner of the background map (left corner). Cssbox_body inside a lower right corner.
First step:
This step is the simplest, in a box to define a background picture in the lower right corner.
CSS Code
The effect you see in the browser is shown in the following illustration:
Execute code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><title>untitled document</ Title><meta http-equiv=content-type content= "text/html; Charset=utf-8 "><style type=text/css>*{padding:0; margin:0;}. cssbox{background:transparent URL (http://www.alixixi.com/UploadPic/2007-7/200777202328126.png) no-repeat; cssbox{background-position:bottom right; width:380px; margin:20px auto; </style><meta content= "MSHTML 6.00.2900.2995" Name=generator></pead><body><div class= cssbox> <div class=cssbox_head> <H2> title </H2> </DIV> <div class=cssbox_body> <p > Content </P> </div></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Second Step
We define the upper-right corner of the style, this step is not difficult to do, because the definition of the background map is defined on the right, the background is not the rounded corners of the transparent, but white, so the white area covers the green part of the cssbox_body.
CSS Code
The effect you see in the browser is shown in the following illustration:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd ">Third Step
After the two steps we have done two corners, and then the third corner, defined in the H2 is the upper left corner. For the sake of beauty, we add filler 10PX to the H2,
CSS Code
Execute code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><title>untitled document</ Title><meta http-equiv=content-type content= "text/html; Charset=utf-8 "><style type=text/css>{padding:0; margin:0;}. Cssbox,.cssbox_head,.cssbox_head h2{background:transparent URL (http://www.alixixi.com/UploadPic/2007-7/ 200777202328126.png) No-repeat; cssbox{background-position:bottom right; width:380px; margin:20px auto; cssbox_head{Background-position:top right; Cssbox_head h2{Background-position:top left; padding:10px;} </style><meta content= "MSHTML 6.00.2900.2995" Name=generator></pead><body><div class= cssbox> <div class=cssbox_head> <H2> title </H2> </DIV> <div class=cssbox_body> <p > Content </P> </DIV></DIV></BODY></HTML>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Doubt: Strange, why is not actually the effect we want? We're looking at the problem, and it's supposed to be the third corner of our definition. The background image covers the corner in the upper right cssbox_head, there are two ways to solve it:
The first: H2 can add a right border so the background of the H2 will not cover the cssbox_head of that corner;
The second type: Reverse thinking, add a right filler in the cssbox_head, so that the background image in the H2 will not cover the cssbox_head angle;
Here we choose the second method.
Execute code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><title>untitled document</ Title><meta http-equiv=content-type content= "text/html; Charset=utf-8 "><style type=text/css>{padding:0; margin:0;}. Cssbox,.cssbox_head,.cssbox_head h2{background:transparent URL (http://www.alixixi.com/UploadPic/2007-7/ 200777202328126.png) No-repeat; cssbox{background-position:bottom right; width:380px; margin:20px auto; cssbox_head{Background-position:top right;padding-right:10px; Cssbox_head h2{Background-position:top left; padding:10px 0 10px 10px;} </style><meta content= "MSHTML 6.00.2900.2995" Name=generator></pead><body><div class= cssbox> <div class=cssbox_head> <H2> title </H2> </DIV> <div class=cssbox_body> <p > Content </P> </DIV></DIV></BODY></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Fourth Step
This step and the third step is very similar, here will not make mistakes, according to the actual situation can only choose the first method.
CSS Code
Complete code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><title>untitled document</ Title><meta http-equiv=content-type content= "text/html; Charset=utf-8 "><style type=text/css>*{padding:0; margin:0;}. Cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{background:transparent URL (http://www.alixixi.com/UploadPic/ 2007-7/200777202328126.png) No-repeat}. cssbox{background-position:bottom right; width:380px; margin:20px auto; cssbox_head{background-position:top right; padding-right:10px. Cssbox_head h2{Background-position:top left; margin:0; padding:10px 0 10px 10px; cssbox_body{Background-position:bottom left; margin-right:10px; /* interior-padding Right * * padding:0px 0 10px 10px;} </style><meta content= "MSHTML 6.00.2900.2995" Name=generator></pead><body><div class= Cssbox> <div Class=cssbox_Head> <H2> title </H2> </DIV> <div class=cssbox_body> <P> content </P> </div>< ;/div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Final effect DiagramStart 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
