html圆角卡片效果,纯CSS3实现圆角效果（含IE兼容解决方法）

如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。

语法和说明

在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：

复制代码代码如下:

.roundElement {

border-radius: 10px;

}

上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可以对每个角单独指定：

复制代码代码如下:

.pearElement {

border-top-left-radius: 7px;

border-top-right-radius: 5px;

border-bottom-right-radius: 6px;

border-bottom-left-radius: 8px;

}

如果你觉得上面的写法太复杂，可以使用下面border-radius简写的方法：

复制代码代码如下:

.oddRoundElement {

border-radius: 12px 5px 12px 5px;

/* or */

<