CSS 抗锯齿的CSS CORNER

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 抗锯齿的CSS CORNER相关的知识，希望对你有一定的参考价值。

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<title>Anti-Aliased CSS CORNER</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<style>
.c{border:1px solid #333;position:relative;height:50px;width:150px;}
.rb_tl{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:-1px;left:-1px;}
.rb_tl div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
.rb_tr{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:-1px;left:146px;}
.rb_tr div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
.rb_bl{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:46px;left:-1px;}
.rb_bl div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
.rb_br{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:46px;left:146px;}
.rb_br div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
</style>
<body>
    <div class="c">
        <div class="rb_tl">
            <div style="top:4px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:3px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:2px;left:1px;"></div>
            
            <div style="top:1px;left:2px;"></div>
            <div style="top:1px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:0px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            
            <div style="top:3px;left:0px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            <div style="top:0px;left:3px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            
            <div style="top:4px;left:1px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            <div style="top:1px;left:4px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            
            <div style="top:1px;left:1px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
            <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
        </div>
        <div class="rb_tr">
            <div style="top:4px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:3px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:2px;left:3px;"></div>
            
            <div style="top:1px;left:2px;"></div>
            <div style="top:1px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            
            <div style="top:3px;left:4px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            <div style="top:0px;left:1px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            
            <div style="top:4px;left:3px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            <div style="top:1px;left:0px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            
            <div style="top:1px;left:3px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
            <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
        </div>
        <div class="rb_bl">
            <div style="top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:1px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:2px;left:1px;"></div>
            
            <div style="top:3px;left:2px;"></div>
            <div style="top:3px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:4px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            
            <div style="top:1px;left:0px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            <div style="top:4px;left:3px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            
            <div style="top:0px;left:1px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            <div style="top:3px;left:4px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            
            <div style="top:3px;left:1px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
            <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
        </div>
        <div class="rb_br">
            <div style="top:0px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:1px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:2px;left:3px;"></div>
            
            <div style="top:3px;left:2px;"></div>
            <div style="top:3px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            <div style="top:4px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
            
            <div style="top:1px;left:4px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            <div style="top:4px;left:1px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
            
            <div style="top:0px;left:3px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            <div style="top:3px;left:0px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
            
            <div style="top:3px;left:3px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
            <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
        </div>
        <div>
            Anti-Aliased CSS CORNER
        </div>
    </div>
</body>
</html>

以上是关于CSS 抗锯齿的CSS CORNER的主要内容，如果未能解决你的问题，请参考以下文章

CSS：@font-face 抗锯齿

Chrome没有抗锯齿文本

关于字体的抗锯齿属性

如何在没有抗锯齿的情况下拉伸图像

在 Mozilla 中使用抗锯齿和灰度时属性值无效

css Corner Ribbon Scss组件