您的位置：首页 > Web前端 > CSS

用css生成的无锯齿完美圆角

2008-04-18 23:59 399 查看
现在web2.0时代圆角风行，对于圆角效果有多种实现方案，比如圆角透明的png图片、透明gif、纯css控制等等

今天在网上看到一种用css实现无锯齿完美圆角的方法，值得收藏。

HTML代码：


<html>
<head>
<styletype="text/css">
.spiffy{display:block}
.spiffy*{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#CC0000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1pxsolid#e99191;
border-right:1pxsolid#e99191;
background:#d83f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1pxsolid#f9e5e5;
border-right:1pxsolid#f9e5e5;
background:#d53030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1pxsolid#d53030;
border-right:1pxsolid#d53030;}
.spiffy4{
border-left:1pxsolid#e99191;
border-right:1pxsolid#e99191}
.spiffy5{
border-left:1pxsolid#d83f3f;
border-right:1pxsolid#d83f3f}
.spiffyfg{
background:#CC0000}
</style>
</head>
<body>
<div>
<bclass="spiffy">
<bclass="spiffy1"><b></b></b>
<bclass="spiffy2"><b></b></b>
<bclass="spiffy3"></b>
<bclass="spiffy4"></b>
<bclass="spiffy5"></b></b>
<divclass="spiffyfg">
<!–contentgoeshere–>
thisisthecontent!<br/>
thisisthecontent!<br/>
thisisthecontent!<br/>
thisisthecontent!<br/>
thisisthecontent!<br/>
thisisthecontent!<br/>
thisisthecontent!<br/>
</div>
<bclass="spiffy">
<bclass="spiffy5"></b>
<bclass="spiffy4"></b>
<bclass="spiffy3"></b>
<bclass="spiffy2"><b></b></b>
<bclass="spiffy1"><b></b></b></b>
</div>
</body>
</html>


.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

效果非常好，没有锯齿状





这里有个工具链接，可以在线生成以上代码，非常方便

http://www.spiffycorners.com/index.php




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航