CSS3border-radius实现圆角矩形效果
CSS3 的border-radius属性，用来搞定圆角矩形，真是前端里的老朋友了。你只要一行代码，立马让生硬的方块柔和起来，看着就舒服。要四个角都一样？border-radius: 10px就搞定。如果你想每个角不一样，也有办法，写全四个值就行。
搭配box-shadow一起用，做个有立体感的卡片，视觉上更有层次感。加个linear-gradient背景，样式就更高级了。像下面这样：
.card {
background: linear-gradient(#fff, #eee);
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
padding: 20px;
}以前为了兼容IE6，还得靠什么 jQuery 插件，比如$.fn.corner，或者加点CSS hack。现在嘛，现代浏览器都搞定了，放心用border-radius就好。
如果你在做老项目，想稳妥点，也可以看看这个兼容所有浏览器的 CSS3 圆角教程，里头有详细的方式。
嗯，，CSS3 的圆角真的是提颜值、还简单、兼容性也不错。如果你还在硬撸div + 图片来实现圆角，是时候升级一下写法了。
文件大小：26.01KB
评论区