use*_*303 3 css border rounded-corners
关于我如何能够获得圆角的任何想法都可以使用多个边框？盒子将是动态的,取决于盒子里的内容,所以我不能添加静态宽度或高度.
body { background: #d2d1d0; }
#box {
border-radius: 15px;
background: #f4f4f4;
border: 1px solid #bbbbbb;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}
DIV#box, #box:before, #box:after {
-moz-border-radius: 15px;
border-radius: 15px;
}
#box:before {
border-radius: 15px;
border: 1px solid white;
width: 99%;
height: 94%;
content: '';
position: absolute;
}
#box:after {
border-radius: 15px;
content: '';
position: absolute;
border: 1px solid #bbbbbb;
width: 98%;
height: 90%;
left: 1px; top: 1px;
}
HTML
<div id="box">Hello World!!!!<br>THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.</div>
我目前遇到的问题是,当我拉伸窗口并非所有边框都对称拉伸时,我该如何解决？仅供参考我目前感兴趣的是让CSS在FF和Chrome中工作.
有几种方法可以获得带圆角的多个边框.我亲自去找一个使用阴影的方法.对于你的HTML代码,你可以做这样的事情.
HTML
<div id="box">
Hello World!!!!<br>
THIS IS SECOND LINE - THERE MIGHT BE MORE LINES OF TEXT LATER ON.
</div>
CSS
#box{
border-radius: 15px;
background: #f4f4f4;
border: 3px solid #bbbbbb;
box-shadow: 0 0 0 3px #8B2323,
0 0 0 6px #FF7F00,
0 0 0 9px #458B00;
width: 100%;
height: 100%;
margin: 10px auto;
position: relative;
}?
我建议如果你想在多个边界上找到更多信息,请阅读我在css中的多边框教程,因为它有一些其他方法可能会对你有所帮助.如果你想了解更多有关阴影的信息,请参阅我的教程阴影中的css.
我建议使用优秀的 jQuery 圆角插件。
所有浏览器都支持它，包括 IE。它使用嵌套 div（无图像）在 IE 中绘制角点。它还在支持它的浏览器（Opera 10.5+、Firefox、Safari 和 Chrome）中具有本机边框半径舍入。因此，在这些浏览器中，插件只需设置一个 css 属性即可。
您需要在之前包含 jQuery 和 Corner js 脚本</body>。然后编写你的 jQuery，如 $('div, p').corner('10px'); 并放在 '' 之前。所以你的 html 将类似于下面的代码。div在这里，我为所有标签制作圆角p。如果你想为特定的 id 或类执行此操作，那么你可以执行类似的操作$('#myid').corner();
<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>