jquery的圆形插件+边框

我想知道我怎么能在IE中使用边框获得圆角的div？jquery的圆形插件+边框

根据jquery插件jquery.corner.js的工作，这将是非常简单的实现！但是，我不能让一个圆角的“带边框”的div在Internet Explorer中工作大于5 ...

以下代码仅用于测试目的。

<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>somepage</title> 

<script type="text/javascript" src="classes/jquery.js"></script> 
<script type="text/javascript" src="classes/jquery.corner.js"></script> 

<script type="text/javascript"> 
    $("#teste").corner("round 8px").parent().css('padding', '3px').corner("round 10px"); 
</script> 

<style type="text/css"> 
.demo{ 
    height: 34px; 
    width: 450px; 
    background: blue; 
} 

</style> 

</head> 
<body bgcolor="green"> 

<div id="teste" class="demo"> 
</div> 

</body> 
</html>

我在做什么错？非常感谢，一如既往。

来源

2011-06-15 obinoob

我从来没有使用过这个插件，但#teste的父母是body，所以你试图在将div应用到body后将圆角应用到body上。不知道这里的想法是什么。也看看CSS3PIE：http://css3pie.com/ – 2011-06-15 22:34:12

我现在这样做，谢谢这似乎很有用... – obinoob 2011-06-15 22:39:52

您试过CSS3PIE了吗？

来源

2011-06-15 22:34:03 kinakuta

我会建议你用CSS的方式来做到这一点。

你去这里选择你的角落的颜色。 http://www.spiffycorners.com/

一旦完成这将给你的CSS你需要把和示例代码如何使用它。它应该在所有浏览器中都能很好地工作。我用它。无需图片。

这是样品的风格：

<style type="text/css"> 
.spiffy{display:block} 
.spiffy *{ 
    display:block; 
    height:1px; 
    overflow:hidden; 
    font-size:.01em; 
    background:#b20000} 
.spiffy1{ 
    margin-left:3px; 
    margin-right:3px; 
    padding-left:1px; 
    padding-right:1px; 
    border-left:1px solid #870000; 
    border-right:1px solid #870000; 
    background:#9f0000} 
.spiffy2{ 
    margin-left:1px; 
    margin-right:1px; 
    padding-right:1px; 
    padding-left:1px; 
    border-left:1px solid #6f0000; 
    border-right:1px solid #6f0000; 
    background:#a30000} 
.spiffy3{ 
    margin-left:1px; 
    margin-right:1px; 
    border-left:1px solid #a30000; 
    border-right:1px solid #a30000;} 
.spiffy4{ 
    border-left:1px solid #870000; 
    border-right:1px solid #870000} 
.spiffy5{ 
    border-left:1px solid #9f0000; 
    border-right:1px solid #9f0000} 
.spiffyfg{ 
    background:#b20000} 
</style>

这是如何使用它：

<div> 
    <b class="spiffy"> 
    <b class="spiffy1"><b></b></b> 
    <b class="spiffy2"><b></b></b> 
    <b class="spiffy3"></b> 
    <b class="spiffy4"></b> 
    <b class="spiffy5"></b></b> 

    <div class="spiffyfg"> 
    <!-- content goes here --> 
    </div> 

    <b class="spiffy"> 
    <b class="spiffy5"></b> 
    <b class="spiffy4"></b> 
    <b class="spiffy3"></b> 
    <b class="spiffy2"><b></b></b> 
    <b class="spiffy1"><b></b></b></b> 
</div>

快乐的造型！

来源

2011-06-16 01:14:13 kheya

嗯，我可以得到与CSS和jQuery的插件的角落我无法得到这是一个边界...无论如何，非常感谢你的小费。 – obinoob 2011-06-16 10:45:04

PIE绝对简单得多！只需要将PIE目录添加到您的项目中，然后编写您的Firefox 3.6 Chrome的css3代码。对于IE添加相同的css3规则行为：url（path_to/PIE.htc）就是这样！ – obinoob 2011-06-16 11:15:49

jquery的圆形插件+边框

回答

相关问题