弯曲的盒子变成CSS？

Question

可以仅使用CSS或至少90％带有角件的CSS来创建此框 ，还是最好重新设计它？

Answer 1

.panel {
    background-color: #2B2B2B;
    -webkit-border-radius: 10px; /* CSS3 Property for webkit design engine used browser */
    -moz-border-radius: 10px; /* CSS3 Property for Mozilla */
    -o-border-radius: 10px; /* CSS3 Property for Opera */
    border-radius: 10px; /* CSS3 Property for Modern Browsers */
    padding: 25px;
}

Answer 2

You can simply use CSS3:

div{
    border-radius: 5px; /* 5px rounded corner on all corners */
}

If you want to use a more browser-support friendly method, you can use background images, or a method like that that Spiffy Corners provides, using small divs to recreate the effect.

Answer 3

看看SpiffyCorners或谷歌的CSS圆角

Answer 4

It is very possible, see here

however if you decide to use corner pieces for compatability you can jsut use:

<div id="box">
<div style="clear:both;">
  <div id="topleft" style="float: left;"></div><div></div><div id="topright" style="float: right;"></div>
</div>
<div id="content"></div>
<div style="clear:both;">
  <div id="bottomleft" style="float: left;"></div><div></div><div id="bottomright" style="float: right;"></div>
</div>
</div>

Answer 5

entirely with css. not exact, but very similar http://jsfiddle.net/jalbertbowdenii/EBfbZ/