Javascript JQuery圆角实现_Javascript_Jquery_Html_Css_Rounded Corners

Javascript JQuery圆角实现

javascript jquery html css

Javascript JQuery圆角实现,javascript,jquery,html,css,rounded-corners,Javascript,Jquery,Html,Css,Rounded Corners,我在包装全局内部div中有一个相当粗糙的corners for（main_bg.gif）实现。虽然现在这个函数使用内部div来表示每个角，但我被告知它不是最好的实现，所以如果有人有更干净的解决方案，那就太好了下角图像利用：margintop:-8px 您可以看到此内部图像（非常浅蓝色）及其角：不幸的是，我也不能使用CSS3 以下是HTML： <body> <div id="global-wrap> <div id="global-inner">

我在包装全局内部div中有一个相当粗糙的corners for（main_bg.gif）实现。虽然现在这个函数使用内部div来表示每个角，但我被告知它不是最好的实现，所以如果有人有更干净的解决方案，那就太好了

下角图像利用：

margintop:-8px
您可以看到此内部图像（非常浅蓝色）及其角：
不幸的是，我也不能使用CSS3
以下是HTML：
<body>
<div id="global-wrap>  
    <div id="global-inner">
        <div class="topleft">
        </div>
        <div class="topright">
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
        <br style="clear: both" />
        <div id="bottom-wrap"></div>
        <div class="bottomleft">
        </div>
        <div class="bottomright">
        </div>
    </div>
</div>
</body>

我将如何为2个CSS项实现此角点
<script type="text/javascript">
$('#global-inner').corner('15px');
</script>

#global-inner 
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/ 
width:536px; 
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;   
}


$（“#全局内部”）.corner（'15px'）；
#全球内部
{
背景：url（“/images/main_bg2.gif”）重复y滚动0 0#E4EAEF；
字体系列：Arial；
字体大小：1.2米；
利润率：15px0.55px0；
溢出：隐藏；
文本对齐：左对齐；
宽度：882px；
}
#mid featureleft常见问题解答.contentbox
{
/*高度：260px；*/
宽度：536px；
填充：3px 7px 0 7px；
保证金：0；
位置：相对位置；
}

希望有帮助：）
希望有帮助：）
使用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（）；

查看使用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（）；

查看中的工作示例，您可以使用jQuery插件。
它将在现代浏览器中使用CSS3版本，但在没有CSS3边界半径（即aso）的浏览器中，插件将使用javascript创建边界半径。您可以使用jQuery插件。
它将在现代浏览器中使用CSS3版本，但在没有CSS3边界半径（即aso）的浏览器中使用该插件使用javascript创建边界半径。谢谢，但我已经尝试了该插件，我最多只能访问CSS 2.1，但我已经尝试了该插件，我最多只能访问CSS 2。1@Hussein好的，我已经下载了jquery.corner.js，但我不知道下一步该怎么做？对不起，我是JQuery的新手。我需要默认的“圆形”或“普通角”模式。高度也将是流动的。他们用另一种语言写了一些信息。@paul，我更新了我的帖子并附上了说明。我还包括了一个关于jsfiddle的工作示例。@Hussein谢谢你！我想这是我在你澄清之前遗漏的部分：$（'div，p'）.corner（）@Hussein实际上这在JFiddle中是有效的——这是因为您需要在JSFIDLE中启用jQuery。它对我有用@Hussein好的，我已经下载了jquery.corner.js，但我不知道下一步该怎么做？对不起，我是JQuery的新手。我需要默认的“圆形”或“普通角”模式。高度也将是流动的。他们用另一种语言写了一些信息。@paul，我更新了我的帖子并附上了说明。我还包括了一个关于jsfiddle的工作示例。@Hussein谢谢你！我想这是我在你澄清之前遗漏的部分：$（'div，p'）.corner（）@Hussein实际上这在JFiddle中是有效的——这是因为您需要在JSFIDLE中启用jQuery。这对我有用
<script type="text/javascript">
$('#global-inner').corner('15px');
</script>

#global-inner 
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/ 
width:536px; 
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;   
}

.rounded {
    -moz-border-radius: 10px; /* Firefox */
    -webkit-border-radius: 10px; /* Safari, Chrome */
     border-radius: 10px; /* CSS3 */
}

<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>