[分享]css3实现圆角矩形及兼容性

CSS3实现圆角矩形是一种非常常见的需求，我们可以使用border-radius属性来轻松地实现这个效果。

/* 所有浏览器 */
border-radius: 10px;

/* IE9及以下 */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px; 

上述代码将一个矩形的角圆化了，其中border-radius属性值为10px，表示圆角的半径为10像素。

但是在实际开发中，我们还需要考虑兼容性，特别是一些老旧的浏览器可能不支持CSS3属性。

为了解决这个问题，我们应该为不支持border-radius属性的浏览器提供一个备用方案。可以使用图片或JavaScript来解决这个问题。

/* 改用图片 */
div {
  background-image: url('rounded-corners.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 10px;
}

/* 或者使用JavaScript */
if (!('borderRadius' in document.body.style)) {
  var divs = document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].className += ' legacy';
  }
} 

上述代码中，我们为不支持border-radius属性的浏览器提供了两种备选方案：使用图片或JavaScript。

总之，在实现圆角矩形时，我们需要考虑兼容性，并为不支持CSS3的浏览器提供备选方案，以确保网页在所有浏览器上都能正常显示。