首页 > 开发 > CSS > 正文

使用Div+CSS纯图片实现圆角矩形的方法小结

2024-07-11 08:56:19
字体:
来源:转载
供稿:网友

对,你没有看错,就是“纯图片”,不是纯代码实现而是利用图片来实现的圆角。你或许会不以为然,可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容,但在当下图片圆角依旧是主流,丰富的图片效果(渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率)这些是用代码实现远远不可比拟的。所以说图片圆角在实战中的重要性是有目共睹的,掌握图片圆角的技巧为日常开发打下坚实的基础。下面开始剖析各个图片圆角的实现技巧,你会发现原来用图片实现的圆角也会那么的丰富多彩!

大致的demo就是这样:

2016222111500723.png (381×364)
1.全部浮动法
如果一个CSS初学者写图片圆角效果,那么推荐使用全部浮动法,简单且容易上手。其原理就是左圆角左浮动,主体也左浮动,右圆角右浮动,外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动,且因背景图片全部平铺,所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。
HTML代码如下:

XML/HTML Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表