纯CSS3圆角效果无图兼容方案
基本圆角效果的纯 CSS 写法，真的是前端早期到现在都挺实用的一个小技巧。以前为了搞个圆角，要么切图，要么上 JS，真麻烦。现在有了 CSS3 的 border-radius，你只要加个类名，比如 class="color1"，圆角立马就有，干净利落，不带一点累赘。
这种方式最妙的一点是：完全不依赖图片，也不需要额外结构，直接就能用。四个角都可以单独调，也能统一设置，椭圆、圆形、甚至不规则角，全都搞定。用在按钮、卡片、提示框这些 UI 元素上，视觉层次一下就丰富了。
还有个加分项就是浏览器兼容性不错。就算你要照顾 IE8 这种老古董，也能加点前缀。而且不用 HACK，代码看着清爽，维护起来也舒服。适合用在各种项目中，是对样式洁癖的你。
如果你想看具体用法，可以看看压缩包里的 demo 文件，一般都有 index.html 和配套的 style.css，照着改一改就能直接用在项目里。
另外，如果你对 border-radius 的各种玩法感兴趣，下面这些文章也蛮有的：
- CSS3(border-radius)边框圆角详解
- CSS3border-radius 实现圆角矩形效果
- 兼容所有浏览器的 CSS3 圆角
- border-radius 失效问题
- CSS 圆角阴影跨浏览器兼容方案
如果你正在做一些组件封装或者老项目重构，推荐你把这种纯 CSS 圆角方案加进去，用起来省心还漂亮。
文件大小：1.94KB
评论区