使用Html和css的div标签的边缘曲线

Question

是否有可能使用html和css仅将div的曲线边缘...不使用图像。

Answer 1

我假设你是指边界半径。是的，它可以在适当的浏览器（不是IE）中使用border-radius。因为它是一个CSS3属性，它没有正确地实现，你需要做一些弄虚作假，使其工作：

-moz-border-radius: 10px; /* for firefox */ 
-webkit-border-radius: 10px; /* for safari & chrome */ 
border-radius: 10px; /* for others (opera) */ 

看看http://www.css3.info/preview/rounded-border/获取更多信息。

Answer 2

是的，这是可能的，但它是CSS 3功能，可能无法在所有浏览器上使用（或在所有浏览器中不一样）。一个例子见this article。

Answer 3

不以一种兼容跨浏览器的方式（特别是IE还不支持它）。在CSS 3中，您可以使用border-radius，Safari和Firefox目前支持-webkit-border-radius和-moz-border-radius。例如

<div style="-moz-border-radius: 10px; 
      -webkit-border-radius: 10px; 
      border-radius: 10px; 
      border: 1px solid #000; 
      padding: 10px;"> 
    This is a sample div. 
</div> 

Answer 4

是的，它当然是技术上可行的（我猜可能是最好的一种），here就是一个例子（一定要检查源代码，它确实是一种很酷的技术）。