我想知道如何在带边框的IE中获得圆角div?
根据jquery插件jquery.corner.js的工作,实现起来非常简单! 但是,我不能在互联网资源管理器中使用大于5的圆角div“with border”...
以下代码仅用于测试目的。
<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>
我做错了什么? 非常感谢,一如既往。
答案 0 :(得分:3)
你有没有试过CSS3PIE?
答案 1 :(得分:1)
我建议您使用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>
快乐的造型!!