CSS 使用精灵优化CSS圆角

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 使用精灵优化CSS圆角相关的知识，希望对你有一定的参考价值。

/*
HTML source:
&lt;div class=&quot;rounded&quot;&gt;
	&lt;div class=&quot;crv_top&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class=&quot;info&quot;&gt;z&lt;/div&gt;
	&lt;div class=&quot;crv_btm&quot;&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
*/

.rounded {width:200px; margin:100px auto 0; background:#a7c8dc;}
.rounded .crv_top, .rounded .crv_top div, .rounded .crv_btm, .rounded .crv_btm div {height:3px; background:url(curves.gif) 0 0 no-repeat; _font-size:0;}
.rounded .crv_top {background-position:right -3px;}
.rounded .crv_btm {background-position:right -9px;}
.rounded .crv_btm div {background-position:0 -6px;}

以上是关于CSS 使用精灵优化CSS圆角的主要内容，如果未能解决你的问题，请参考以下文章

更好的 JQueryish 方式或 CSS 精灵

如何使用css让图片显示圆角

使用 CSS 创建圆角 [关闭]

前端优化

css圆角边框代码，css3中div圆角边框是怎么写的

如何样用css做出圆角矩形