Cascading Style Sheets Tutorial

HTML + CSS achieve rectangular fillet (without picture) - copied from GTalk

  GTalk template from the css to pull out in the NEE: P 

  Reason is actually very simple, and erected rectangular fillet height of 4, then on to the next followed by the (unit px, the frame is given by the width and color are 1 px maintain consistency): 
  Height of 1, partitions are about 5, only the top rim of div; 
  Height of 1, about three intervals are only about borderless div; 
  Height of 1, spacing about 2 were only about borderless div; 
  Height of 1, spacing about 1 are only about borderless div; 
  0 intervals are around, only about borderless div - placed; 
  Height of 1, spacing about 1 are only about borderless div; 
  Height of 1, spacing about 2 were only about borderless div; 
  Height of 1, about three intervals are only about borderless div; 
  Height of 1, partitions are about 5, only the bottom frame of div 

  Nonsense least, in this code 

  Css style definition: 

  Div.panel {…}{ 
  Clear: both; 
  ) 
  DIV.panel DIV.b0 {…}{ 
  Height: 1px; 
  Font-size: 1px; 
  Overflow: hidden; 
  Margin: 0px 5px; 
  Border-top: 1px solid # 938F5A; 
  ) 
  DIV.panel DIV.b1 {…}{ 
  Height: 1px; 
  Font-size: 1px; 
  Overflow: hidden; 
  Margin: 0px 5px; 
  Border-bottom: 1px solid # 938F5A; 
  ) 
  DIV.panel DIV.b2 {…}{ 
  Height: 1px; 
  Font-size: 1px; 
  Overflow: hidden; 
  Margin: 0px 3px; 
  Border-left: 2px solid # 938F5A; 
  Border-right: 2px solid # 938F5A; 
  ) 
  DIV.panel DIV.b3 {…}{ 
  Height: 1px; 
  Font-size: 1px; 
  Overflow: hidden; 
  Margin: 0px 2px; 
  Border-left: 1px solid # 938F5A; 
  Border-right: 1px solid # 938F5A; 
  ) 
  DIV.panel DIV.b4 {…}{ 
  Height: 2px; 
  Font-size: 1px; 
  Overflow: hidden; 
  Margin: 0px 1px; 
  Border-left: 1px solid # 938F5A; 
  Border-right: 1px solid # 938F5A; 
  ) 
  Div.panel div.content {…}{ 
  Border-left: 1px solid # 938F5A; 
  Border-right: 1px solid # 938F5A; 
  Padding: 0px 5px; 
  Text-align: left; 
  Filter: progid: DXImageTransform.Microsoft.Gradient (gradientType ='0 ', startColorStr =' # FFFEEA 'endColorStr =' # F2F4CC '); 
  /**//* Height: 1px; * / 
  Background-color: # fff; 
  ) 
  Div.panel div.content. Caption {…}{ 
  Font-weight: bold; 
  Display: block; 
  Border-bottom: 1px solid # CDCDCD; 
  Margin: 0px 0px 1px 0px; 
  Padding: 5px 0 0 0; 
  Width: 100%; 
  ) 
  DIV.panel DIV.to {…}{ 
  Background-color: # AD0910; 
  ) 
  DIV.panel DIV.bo {…}{ 
  Background-color: # F1F3CB; 
  ) 
  DIV.panel DIV.clear {…}{ 
  Clear: both; 
  Height: 1px; 
  Overflow: hidden; 
  ) 
  DIV.panel DIV.break {…}{ 
  Height: 1px; 
  Margin: 3px 0px 0px 0px; 
  Overflow: hidden; 
  ) 

  HTML: 

  <div Class="panel"> 
  <DIV Class="to b1"> </ DIV> 
  <DIV Class="to b2"> </ DIV> 
  <DIV Class="to b3"> </ DIV> 
  <DIV Class="to b4"> </ DIV> 
  <DIV Class="content"> 
  <! - Put content here -> 
  <DIV Class=clear> </ DIV> 
  </ DIV> 
  <DIV Class="bo b4"> </ DIV> 
  <DIV Class="bo b3"> </ DIV> 
  <DIV Class="bo b2"> </ DIV> 
  <DIV Class="bo b1"> </ DIV> 
  <DIV Class="break"> </ DIV> 
  </ Div> 

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • DotNetKicks
  • DZone

Tags: css fillet, html, html css, w3c html

Releated Posts

  • Html forms and the use of mixed CSS web design
  • Skills and know-how: Use ASP.NET 2.0 CSS CSS friendly control adapter generate HTML output
  • A good example HTML + CSS menu
  • Css + html achieve transverse vertical header locked forms
  • CSS achieved with a fixed table of the first HTML forms

This entry was posted on Friday, January 18th, 2008 at 12:00 am and is filed under CSS Tutorial By Examples. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

« The grammatical form borders. Css
Css picture filters Daquan »

Leave a Reply

  • Categories

    • CSS Properties (491)
    • CSS Tutorial (1154)
    • CSS Tutorial By Examples (1201)
    • Css+Div Web Design (3274)
    • Xhtml and Web Design (1797)

  • Archives

    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • October 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007

  • Pages

    • About us

Cascading Style Sheets Tutorial