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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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"> 
 
 
 
 
 
 
 <div class="spiffyfg"> 
  
 This is content 
here
 
 http://www.spiffycorners.com/index.php?sc=spiffy&bg=3847B4&fg=D68A88&sz=3px 
 </div> 
 
 
 
 
 
 
</div> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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