Http://and8.net/article.asp? Id = 130 (convert)
Several CSS effects collected.
CSS rounded table
HTML code <Style> <br/> V/: * {behavior: URL (# default # VML );} <br/> </style> <br/> </pead> <br/> <body> <br/> <v: roundrect style = "position: relative; width: 400; Height: 100px "> <br/> <v: textbox style =" font-size: 12px "> CSS rounded corner table </V: textbox> <br/> </V: roundrect>
[Ctrl + A select all tips: you can modify some code and then press run]
Small triangles drawn by CSSHTML code<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"> <br/> <HTML> <br/> <pead> <br/> <title> small triangles drawn by CSS </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <style> <br/>/* zishu.cn */<br/> * {margin: 0; padding: 0; font-size: 12px; font-family: verdana, "", Arial; line-Height: 1.8; List-style: None ;}< br/># info, # nav {margin: 50px; Border: 1px dashed # ff3300; Background: # ffffcc; padding: 50px ;}< br/># info Div {Background: # ff0000; width: 0px; Height: 0px; overflow: hidden; margin-bottom: 10px ;}< br/>/* triangle Writing Method */<br/> # com_a {border-top: 10px solid # ffffcc; border-left: 10px solid # ff3300; border-bottom: 10px solid # ffffcc; }< br/># com_ B {border-top: 10px solid # ffffcc; border-right: 10px solid # ff3300; border-bottom: 10px solid # ffffcc;} <br/> # com_c {border-top: 10px solid # ffffcc; border-Right: 10px solid # ff3300; border-bottom: 10px solid # ffffcc; border-left: 10px solid # ff3300 ;}< br/># com_d {border-top: 10px solid # ff3300; border-right: 10px solid # ffffcc; border-bottom: 10px solid # ff3300; border-left: 10px solid # ffffcc;} <br/> # com_e {border-top: 10px solid # ffffcc; border-left: 10px solid # ff3300 ;}< br/># com_f {border-top: 10px solid # ff3300; border-Right: 10px solid # ffffcc; border-left: 10px solid # ffffcc;} <br/> # com_g {border-Right: 10px solid # ffffcc; border-bottom: 10px solid # ff3300; border-left: 10px solid # ffffcc ;}< br/> # com_h {border-top: 10px solid # ff3300; border-bottom: 10px solid # ff3300; border-left: 10px solid # ffffcc ;}< br/> # com_ I {border-top: 10px solid # ff3300; border-Right: 10px solid # ff3300; border-bottom: 10px solid # ff3300; border-left: 10px solid # ffffcc ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "info"> <br/> <p> triangle writing </p> <br/> <Div id = "com_a"> </div> <br/> <Div id = "com_ B"> </ div> <br/> <Div id = "com_f"> </div> <br/> <Div id = "com_g"> </div> <br/> <Div id = "com_c"> </div> <br/> <Div id = "com_d"> </div> <br/> <Div id = "com_e"> </ div> <br/> <Div id = "com_h"> </div> <br/> <Div id = "com_ I"> </div> <br/> </ div> <br/> </body> <br/> </ptml>
[Ctrl + A select all tips: you can modify some code and then press run]
Applications of CSS triangle paintingHTML code<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"> <br/> <HTML> <br/> <pead> <br/> <title> applications of CSS triangle painting </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <style> <br/>/* zishu.cn */<br/> * {margin: 0; padding: 0; font-size: 12px; font-family: verdana, "", Arial; line-Height: 1.8; List-style: None ;}< br/># nav {margin: 50px; Border: 1px dashed # ff3300; Background: # ffffcc; padding: 50px;} <br/> A: Link, A: visited {color: # ff6600; text-Decoration: none ;} <br/> A: hover, A: active {color: # ff0000 ;}< br/> # nav a span {overflow: hidden; border-top: 6px solid # ffffcc; border-left: 6px solid # ffffcc; border-bottom: 6px solid # ffffcc; Height: 0px; width: 0px; margin: 2px 2px 0-10px; position: absolute} <br/> # nav A: hover span {Background: # cc3300; border-top: 6px solid # ffffcc; border-left: 6px solid # ff3300; border-bottom: 6px solid # ffffcc; overflow: hidden; float: Left ;} <br/> </style> <br/> </pead> <body> <br/> <Div id = "nav"> <br/> <p> CSS painting an example of a triangle application </p> <br/> <ul> <br/> <li> <a href = "#"> <span> </span> my homepage </a> </LI> <br/> <li> <a href = "#"> <span> </span> Leave a message for me </a> </Li> <br/> <li> <a href = "#"> <span> </span> Links </a> </LI> <br/> <li> <a href = "#"> <span> </span> my logs </a> </LI> <br/> <li> <a href = "#"> <span> </span> Forum bumping </a> </LI> <br/> </ul> <br/> </div> </body> </ HTML>
[Ctrl + A select all tips: you can modify some code and then press run]