Css fillet a variety of methods to achieve results and

Posted by john
1/10/2007
Related Tags:
css fillet 

  Css effect of a fillet 

<html>
<head>
  <title> css fillet effect </ title> 
  <meta Http-equiv="content-type" content="text/html; charset=gb2312"> 
  <style Type="text/css"> 
  . RoundedCorner (background: # 9BD1FA) 
  . Rtop,. Rbottom (display: block; background: # FFF) 
  . Rtop b,. Rbottom b (display: block; height: 1px; overflow: hidden; background: # 9BD1FA) 
  . R1 (margin: 0 5px) 
  . R2 (margin: 0 3px) 
  . R3 (margin: 0 2px) 
  . Rtop b.r4,. Rbottom b.r4 (margin: 0 1px; height: 2px) 
  </ Style> 
  </ Head> 
<body>
  <div Class="RoundedCorner"> 
  <b Class="rtop"> <b class="r1"> </ b> <b class="r2"> </ b> <b class="r3"> </ b> <b class = "r4 "> </ b> </ b> 
  <br> Css no picture frame to achieve fillet </ br> <br> 
  <b Class="rbottom"> <b class="r4"> </ b> <b class="r3"> </ b> <b class="r2"> </ b> <b class = "r1 "> </ b> </ b> 
  </ Div> 
  </ Body> 
  </ Html> 

  Css fillet effect 2 

<html>
<head>
  <title> Abbreviated css fillet </ title> 
  <style Type="text/css"> 
  . B1,. B2,. B3,. B4,. B1b,. B2b,. B3b,. B4b,. B (display: block; overflow: hidden;) 
  . B1,. B2,. B3,. B1b,. B2b,. B3b (height: 1px;) 
  . B2,. B3,. B4,. B2b,. B3b,. B4b,. B (border-left: 1px solid # 999; border-right: 1px solid # 999;) 
  . B1,. B1b (margin: 0 5px; background: # 999;) 
  . B2,. B2b (margin: 0 3px; border-width: 2px;) 
  . B3,. B3b (margin: 0 2px;) 
  . B4,. B4b (height: 2px; margin: 0 1px;) 
  . D1 (background: # F7F8F9;) 
  </ Style> 
  </ Head> 
<body>
<div>
  <b Class="b1"> </ b> <b class="b2 d1"> </ b> <b class="b3 d1"> </ b> <b class="b4 d1"> </ b > 
  <div Class="b d1"> 
  <font Style="font-size:26px;color:red; margin:0px 10px;"> abbreviated CSS fillet </ font> 
  </ Div> 
  <b Class="b4b d1"> </ b> <b class="b3b d1"> </ b> <b class="b2b d1"> </ b> <b class="b1b"> </ b > 
  </ Div> 
  </ Body> 
  </ Html> 

  Fillet effect css 3 (table realization) 

<html>
<head>
  <title> html fillet </ title> 
  </ Head> 
<body>
  <TABLE CellSpacing=0 cellPadding=0 border=0> 
<TBODY>
<TR>
  <TD Width=1> </ TD> 
  <TD Width=1> </ TD> 
  <TD Width=1> </ TD> 
  <TD Width=274 bgColor=#999999> </ TD> 
  <TD Width=1> </ TD> 
  <TD Width=1> </ TD> 
  <TD Width=1> </ TD> 
  </ TR> 
<TR>
  <TD> </ TD> 
  <TD BgColor=#999999 colSpan=2> </ TD> 
  <TD BgColor=#f7f8f9> </ TD> 
  <TD BgColor=#999999 colSpan=2> </ TD> 
  <TD> </ TD> 
  </ TR> 
<TR>
  <TD> </ TD> 
  <TD BgColor=#999999> </ TD> 
  <TD BgColor=#f7f8f9 colSpan=3> </ TD> 
  <TD BgColor=#999999> </ TD> 
  <TD> </ TD> 
  </ TR> 
<TR>
  <TD Width=1 bgColor=#999999> </ TD> 
  <TD Height=60 bgColor=#f7f8f9 colSpan=5> <font style="font-size:26px;color:red; margin:0px 10px;"> html fillet </ font> </ TD> 
  <TD Width=1 bgColor=#999999> </ TD> 
  </ TR> 
<TR>
  <TD> </ TD> 
  <TD BgColor=#999999> </ TD> 
  <TD BgColor=#f7f8f9 colSpan=3> </ TD> 
  <TD BgColor=#999999> </ TD> 
  <TD> </ TD> 
  </ TR> 
<TR>
  <TD> </ TD> 
  <TD BgColor=#999999 colSpan=2> </ TD> 
  <TD BgColor=#f7f8f9> </ TD> 
  <TD BgColor=#999999 colSpan=2> </ TD> 
  <TD> </ TD> 
  </ TR> 
<TR>
  <TD> </ TD> 
  <TD> </ TD> 
  <TD> </ TD> 
  <TD BgColor=#999999> </ TD> 
  <TD> </ TD> 
  <TD> </ TD> 
  <TD> </ TD> 
  </ TR> 
  </ TBODY> 
  </ TABLE> </ body> 
  </ Html> 

  Css fillet 4 

<html>
<head>
  <title> Css3D fillet </ title> 
  <style Type=text/css> 
  . Raised (background: transparent; width: 40%;) 
  . Raised h1,. Raised p (margin: 0 10px;) 
  . Raised h1 (font-size: 2em; color: # fff;) 
  . Raised p (padding-bottom: 0.5em;) 
  . Raised. B1,. Raised. B2,. Raised. B3,. Raised. B4,. Raised. B1b,. Raised. B2b,. Raised. B3b,. Raised. B4b (display: block; overflow: hidden; Font - size: 1px;) 
  . Raised. B1,. Raised. B2,. Raised. B3,. Raised. B1b,. Raised. B2b,. Raised. B3b (height: 1px;) 
  . Raised. B2 (background: # ccc; border-left: 1px solid # fff; border-right: 1px solid # eee;) 
  . Raised. B3 (background: # ccc; border-left: 1px solid # fff; border-right: 1px solid # ddd;) 
  . Raised. B4 (background: # ccc; border-left: 1px solid # fff; border-right: 1px solid # aaa;) 
  . Raised. B4b (background: # ccc; border-left: 1px solid # eee; border-right: 1px solid # 999;) 
  . Raised. B3b (background: # ccc; border-left: 1px solid # ddd; border-right: 1px solid # 999;) 
  . Raised. B2b (background: # ccc; border-left: 1px solid # aaa; border-right: 1px solid # 999;) 
  . Raised. B1 (margin: 0 5px; background: # fff;) 
  . Raised. B2,. Raised. B2b (margin: 0 3px; border-width: 0 2px;) 
  . Raised. B3,. Raised. B3b (margin: 0 2px;) 
  . Raised. B4,. Raised. B4b (height: 2px; margin: 0 1px;) 
  . Raised. B1b (margin: 0 5px; background: # 999;) 
  . Raised. Boxcontent (display: block; background: # ccc; border-left: 1px solid # fff; border-right: 1px solid # 999;) 
  </ STYLE> 
  </ Head> 
<body>
  <div Class="raised"> 
  <b Class="b1"> </ b> <b class="b2"> </ b> <b class="b3"> </ b> <b class="b4"> </ b> 
  <div Class="boxcontent"> 
  <h1> Css3D fillet </ h1> 
  </ Div> 
  <b Class="b4b"> </ b> <b class="b3b"> </ b> <b class="b2b"> </ b> <b class="b1b"> </ b> 
  </ Div> 
  </ Body> 
  </ Html> 




Related articles:

Identify common Web application security flaws effectively prevent invasion
  Popularization of the Internet and Web technology are rapidly evolving Today, the online security challenges facing an increasingly grim.    Along with online information and the upgrading of the availability of services, as well as Web-based attacks and destruction of the growth o...
Use IIS Request Viewer view current connection
  If your server, if you want to view current connection IIS: for example, the number of requests, each request moves Url request, the requesting IP, and other information, using Microsoft's IIS Diagnostics Toolkit is a very good option, the use of The IIS Request Viewer to view the curren...
What website?
  There are many e-commerce features, the website also has many functions, enterprises are most concerned about the construction site will give enterprises What are the benefits, specifically, what should be the role website?    First, to establish a corporate image, increase their v...
Ajax column
  [Original] teach you entry ajax: ajax example of a simple response to this article    INTRODUCTION response    1.    Ajax?    Ajax Asynchronous JavaScript And Xml is short, namely: asynchronous javascript and a combination of xml technology.  &...
Five forms of the code explain page pop-up window
  1. Shells Kai a full-screen window  <html>   <body Onload="window.open(' http://www.webjx.com','example01','fullscreen' );">    <b> Www.webjx.com </ b>    </ Body>    </ Html>&n...