纯CSS生成抗锯齿圆角的代码


答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
    <meta name="author" content="Smiling Dolphin" /> 
    <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" /> 
    <meta name="description" content="my favorites language." /> 
    <meta name="robots" content="all" /> 
    <title>抗锯齿圆角</title> 
<style type="text/css"> 
.antialias-roundedcorners{width:650px;height:76px;padding:5px;background-color:#3847B4;} 
.spiffy{display:block} 
.spiffy *{ 
  display:block; 
  height:1px; 
  overflow:hidden; 
  font-size:.01em; 
  background:#F1FFDD} 
.spiffy1{ 
  margin-left:3px; 
  margin-right:3px; 
  padding-left:1px; 
  padding-right:1px; 
  border-left:1px solid #8796c5; 
  border-right:1px solid #8796c5; 
  background:#c2d1d2} 
.spiffy2{ 
  margin-left:1px; 
  margin-right:1px; 
  padding-right:1px; 
  padding-left:1px; 
  border-left:1px solid #4a59b8; 
  border-right:1px solid #4a59b8; 
  background:#cddcd5} 
.spiffy3{ 
  margin-left:1px; 
  margin-right:1px; 
  border-left:1px solid #cddcd5; 
  border-right:1px solid #cddcd5;} 
.spiffy4{ 
  border-left:1px solid #8796c5; 
  border-right:1px solid #8796c5} 
.spiffy5{ 
  border-left:1px solid #c2d1d2; 
  border-right:1px solid #c2d1d2} 
.spiffyfg{ 
  background:#F1FFDD; 
  padding:3px;} 
</style> 
</head> 
<body> 
<div class="antialias-roundedcorners"> 
  <b class="spiffy"> 
  <b class="spiffy1"><b></b></b> 
  <b class="spiffy2"><b></b></b> 
  <b class="spiffy3"></b> 
  <b class="spiffy4"></b> 
  <b class="spiffy5"></b></b> 
  <div class="spiffyfg"> 
    <!-- content goes here --> 
    This is content 
here
 
    http://www.spiffycorners.com/index.php?sc=spiffy&bg=3847B4&fg=D68A88&sz=3px 
  </div> 
  <b class="spiffy"> 
  <b class="spiffy5"></b> 
  <b class="spiffy4"></b> 
  <b class="spiffy3"></b> 
  <b class="spiffy2"><b></b></b> 
  <b class="spiffy1"><b></b></b></b> 
</div> 
</body> 
</html> 


  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：一个老外弄的Clearing floats(清除浮动的方法)
下一个：做网页字体大易做图网页中同字号字体的不同单位对比列表
更多图片编程知识: