Question

我有一个带有CSS的按钮，它现在没有圆角。我有左右图像（角落）如何将它们应用到下面的CSS？谢谢你的帮助。

.myButton
{
    background-image: url(../../Images/SubmitButtonBack.png);
    color: White;
    font-family: Verdana;
    font-weight: bold;
    font-size: 8pt;
    width: 160px;
    height: 22px;
    border: none;
    position: relative;
    cursor: pointer;
    margin-bottom:5px;
}

Answer 1

CSS3允许您通过指定border-radius代替

来执行此操作

http://www.css3.info/preview/rounded-border/

Answer 2

css3解决方案适用于所有非IE浏览器和IE从版本9开始（下个月？）。

如果您想提高与IE8的兼容性，可以使用:before和:after：

.myButton:before {
  content: url(/path/to/left_image);
}
.myButton:after{
  content: url(/path/to/right_image);
}

如果IE8不够好，你应该使用@ Wolfy87的答案。

Answer 3

其他答案中提到的方法似乎主要涉及CSS3，它不完全是跨浏览器。我想你应该尝试使用sliding doors technique。它是100％跨浏览器，将使用您已有的角落图像。

Answer 4

使用jQuery圆角插件。

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

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

以下是如何使用

您需要在</body>之前包含jQuery和Corner js脚本。然后编写jQuery，如<script>$('div, p').corner('10px');</script>，并放在''之前。所以你的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

处的工作示例

Answer 5

其他人说要使用border-radius，这是100％准确的。这是一个小型演示。

http://jsfiddle.net/TJcGc/

Answer 6

CSS3让您可以使用border-radius使用圆角，此时可以使用供应商前缀-webkit和-moz，如下所示：

-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */

请注意，Internet Explorer不支持此属性。解决方案是使用像css3pie这样的脚本，它将css3属性带到Internet Explorer。

演示：http://jsfiddle.net/sUegC/1

css如何在按钮上获得圆角。

6 个答案:

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

以下是如何使用

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