Question

我想在我的网页上使用border-radius和不同的变体。我也想为不支持此功能的浏览器提供备用CSS。我正在使用MVC3。

是否有一种简单的方法可以让我提供不同的CSS，具体取决于浏览器是否支持border-radius并且只有一个CSS文件。换句话说，我宁愿不必拥有额外的CSS文件来管理浏览器的不同变体。

我读到了关于BrowserCaps的内容。是否有人使用MVC3进行CSS切换？

Answer 1

使用优秀的jQuery圆角插件。

http://jquery.malsup.com/corner/

所有浏览器都支持IE，包括IE。它使用嵌套的div（没有图像）在IE中绘制角落。它还支持浏览器中的原生边界半径舍入（Opera 10.5 +，Firefox，Safari和Chrome）。因此，在这些浏览器中，插件只是设置了一个css属性。

以下是如何使用

您需要在</body>之前包含jQuery和Corner js脚本。然后编写你的jQuery，如$（'div，p'）。corner（'10px'）;放在''之前。所以你的HTML看起来像下面的代码。在这里，我为所有div和p标签制作圆角。如果您想针对特定的ID或类进行操作，那么您可以执行$('#myid').corner();

之类的操作

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

检查http://jsfiddle.net/VLPpk/1

处的工作示例

<强>更新

如果您想要仅使用CSS的跨浏览器解决方案，请使用以下

.curved {
  behavior: url("border-radius.htc");
  -moz-border-radius: 20px; /* Firefox */
  -webkit-border-radius: 20px; /* Safari and Chrome */
  -khtml-border-radius: 20px; /* Linux browsers */
  border-radius: 20px; /* Opera 10.50, IE and CSS3 */
}

从http://code.google.com/p/curved-corner下载htc文件，使其在IE浏览器中运行。上面提到的jQuery插件仍然是最简单的方法，你不必每次想要发出一个半径时修改这么多的CSS属性。

Answer 2

Modernizr可能对您有所帮助。它会使用javascript为您的标记添加borderradius或no-borderradius，然后您可以根据它进行样式设置：

http://www.modernizr.com/docs/#borderradius

如何为不支持border-radius`的浏览器提供不同的CSS代码

2 个答案:

以下是如何使用

检查http://jsfiddle.net/VLPpk/1