CSS3圆角属性border-radius及兼容性

SongKer 发布时间:2014-08-15 分类:Web 阅读:4661次 3 条评论

CSS3支持圆角属性border-radius,目前的浏览器大部分都支持该属性,可是这万恶的IE9以下还是不支持。

<style> 
div
{
    text-align:center;
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:300px;
    height:50px;
    border-radius:30px;
    -moz-border-radius:30px; /* 老的 Firefox */
}
</style>
<body>
    <div>border-radius 属性不支持IE9以下浏览器</div>
</body>

效果:

border-radius 属性不支持IE9以下浏览器

IE9以下直接使用矩形边框或者使用背景图片替代圆角样式,背景图片最好采用Png格式图片,这样可以保持各个浏览器一致。

关键字词: CSS3圆角属性

已有3条留言
  • 梦轩丽人
    发布于 2014-08-19 10:26:06  回复该评论
  • 圆角比直角好看很多
    • Super
      发布于 2014-08-19 11:01:33  回复该评论
    • 嗯, 可惜只能在谷歌及火狐等浏览器上显示完整,在IE下还是矩形..

发表评论:

◎欢迎您的参与讨论。