小图片的做的css圆角

最新推荐文章于 2021-08-09 14:47:35 发布

zuowu

最新推荐文章于 2021-08-09 14:47:35 发布

阅读量687

点赞数

CC 4.0 BY-SA版权

文章标签： css class url border div

本文链接：https://blog.youkuaiyun.com/zuowu/article/details/3127398

本文介绍了一种使用单一小图片实现CSS圆角效果的方法，通过定位和背景图片巧妙结合，达到美观且灵活的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式
<style>

.lrn{ position:relative; width:422px;}
.lrnlt,.lrnlb,.lrnrt,.lrnrb{ position:absolute; width:5px; height:5px; font:0/0 Arial;}
.lrnlt{ left:0; top:0; background:url(images/website/base/login_bg.gif) 0 0;}
.lrnlb{ left:0; bottom:0;_bottom:-1px; background:url(images/website/base/login_bg.gif) 0 -5px;}
.lrnrt{ right:0; top:0; background:url(images/website/base/login_bg.gif) -5px 0;}
.lrnrb{ right:0; bottom:0;_bottom:-1px; background:url(images/website/base/login_bg.gif) -5px -5px;}

.cnt{border:1px solid #cccccc;}/*边框颜色设置为小图片的颜色*/
</style>

html结构
<div class="lrn">
<span class="lrnlt"></span><span class="lrnlb"></span><span class="lrnrt"></span><span class="lrnrb"></span>

<div class="cnt">内容放在此处</div>
</div>

图片说明：

图片大小 10*10 上面是一个半径为5px的圆

优缺点：

优点：只用一张小小的合成图片即可完成完美的圆角。

缺点：需另外合成图片，还是有几个空的标签。

用处：

如果有很多都有圆角的，可以通过继承来改变颜色不同的圆角。