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的圓形插件+邊框

回答

相關問題