DIV does not use pictures to make variable and versatile rounded corners

Links to the original text: http://www.cnblogs.com/jianpingchen/archive/2012/02/05/2339382.html

Sample, above are two rounded boxes.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> New XHTML Document </title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
  6.   <meta name="generator" content="editplus" />  
  7.   <meta name="author" content="cjx" />  
  8.   <meta name="keywords" content="" />  
  9.   <meta name="description" content="" />  
  10.   <style type="text/css">  
  11. .b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}  
  12. .b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}  
  13. .b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}  
  15. .bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}  
  16. .bt {background: #EDF7FF;margin:0 2px;padding:5px;}  
  17. .bb {background: #FFFFFF;margin:0 2px;padding:5px;}  
  19. /**Another color*/  
  20. .bb1{background: #B8E7B3;}/* Outermost Background Color of Border Line*/
  21. .bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/* Background and border color*/
  22. .bb3{background: #E7F9E3;}/* Heading Background Color*/
  23.   </style>  
  24.  </head>  
  26.  <body>  
  27.   <b class="b1"></b><b class="b2"></b><b class="b3"></b>  
  28.   <div class="bc">  
  29.     <div class="bt ">Title</div>  
  30.     <div class="bb">  
  31.     Fillet three sides Here is the content.  
  32.     </div>  
  33.   </div>  
  34.   <b class="b3"></b><b class="b2"></b><b class="b1"></b>  
  35. <hr/>  
  36.   <b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>  
  37.   <div class="bc bb2">  
  38.     <div class="bt bb3">Another color</div>  
  39.     <div class="bb">  
  40.     Another color Here is the content.  
  41.     </div>  
  42.   </div>  
  43.   <b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>  
  44.  </body>  
  45. </html>  

Here are three rounded corners of thickness. If you need a bigger rounded corners, the marker b will have one more, that is, one more pixel rounded corners coming out.

If you want to copy it to a new place for use, just like

  1. /**Another color*/  
  2. .bb1{background: #B8E7B3;}/* Outermost Background Color of Border Line*/
  3. .bb2{background: #E7F9E3;border: #B8E7B3;}/* Background and border color*/
  4. .bb3{background: #E7F9E3;}/* Heading Background Color*/

That way, you can add a style.


Thank you for your attention.

Html code
  1. bb2{background: E7F9E3;border: B8E7B3;}/* background and border color*/
  2. Change to the following, write in more detail, FF can show the border, error.   
  3. bb2{background: E7F9E3;border-left-color: B8E7B3;border-right-color: B8E7B3;}/* border background and border color*/
  4. The original address: http://www.iteye.com/topic/610962
Relevant information:

Reprinted at: https://www.cnblogs.com/jianpingchen/archive/2012/02/05/2339382.html

Posted on Mon, 07 Oct 2019 03:42:54 -0700 by doublea2k7