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

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

jquery html css

Jquery css如何在按钮上获得圆角。,jquery,html,css,rounded-corners,Jquery,Html,Css,Rounded Corners,我有一个CSS按钮，它现在没有圆角。我有左边和右边的图片（角），我如何将它们应用到下面的CSS？谢谢你的帮助 .myButton { background-image: url(../../Images/SubmitButtonBack.png); color: White; font-family: Verdana; font-weight: bold; font-size: 8pt; width: 160px; height: 22px

我有一个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;
}

CSS3允许您通过指定

边界半径来执行此操作
其他人说使用了100%准确的边界半径。这里是一个小演示
其他答案中提到的方法似乎主要涉及CSS3，而CSS3并不完全是跨浏览器的。我想你应该试着用这个。它是100%跨浏览器，将使用您已经拥有的角图像。
CSS3使您能够使用圆角和边框半径，此时最好使用供应商前缀-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不支持此属性。解决方案是使用这样的脚本，将css3属性带到internet explorer
演示：
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的答案。
使用jQuery圆角插件
它在包括IE在内的所有浏览器中都受支持。不需要图像。它使用嵌套div（无图像）在IE中绘制角点。在支持它的浏览器（Opera10.5+、Firefox、Safari和Chrome）中，它还具有本机边界半径舍入。因此，在这些浏览器中，插件只需设置css属性即可
下面是如何使用它
您需要在
之前包含jQuery和Corner js脚本。然后编写jQuery，比如$（'div，p'）.corner（'10px'）并放置在“”之前。因此，您的html将类似于下面的代码。这里我为所有div
和p
标签制作圆角。如果您想为特定id或类执行此操作，则可以执行类似于$（'#myid'）.corner（）的操作


$（'div，p'）.corner（）；

检查工作示例，不完全是跨浏览器，我的意思是任何低于版本9的IE都不支持它。我很想知道为什么我对我认为不错的建议投了反对票。+1我完全同意，这是一个跨浏览器兼容且不需要javascript的好建议。使用固定高度的按钮，它很容易实现，不需要额外的html（如果按钮是列表的一部分或类似的东西，那么…）。
<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>