將曲線框放入css中？

Question

可以只使用css創建this box，或者至少90％的css帶有角件，還是最好重新設計它？

Answer 1

您可以簡單地使用CSS3：

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

如果您想使用更多的瀏覽器支持友好的方法，你可以使用背景圖片，或類似的是Spiffy Corners提供了一種方法，用小的div重建效果。

Answer 2

看一看SpiffyCorners例如或google for css rounded corners

Answer 3

這是非常可能的，請參閱here

但是

，如果你決定使用的角落塊的兼容性可以僅僅指剛使用：

<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 4

完全用CSS。不完全一樣，但非常相似http://jsfiddle.net/jalbertbowdenii/EBfbZ/

Answer 5

.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; 
}