CSS3的border-radius利用DIV+CSS生成圓角邊框，在很多情況下都會用到，目前DIV+CSS的圓角邊框，一種是利用CSS3，一種是利用布局模擬出圓角。

先說第一種，利用CSS3，前提是您的瀏覽器必須支持CSS3，Firefox3是支持的，我看到的很多網站圓角也是利用CSS3直接生成的，無非就是ie下依然顯示直角而已，讓ie固執去吧。

利用CSS3，你可以指定4個角都是圓角，或者某一個角是圓角非常方便，代碼如下：

CSS Code復制內容到剪貼板

#round{

background-color:#000;

border:1pxsolid#000;

-moz-border-radius:10px;

-webkit-border-radius:10px;

color:#fff;

}

#indie{

background-color:#000;

border:1pxsolid#000;

-moz-border-radius-topright:10px;

-moz-border-radius-bottomright:10px;

-webkit-border-top-left-radius:10px;

-webkit-border-bottom-left-radius:10px;

color:#fff;

}

圓角邊框

部分圓角

不使用 border-radius 實現圓角CSS3中，利用屬性 border-radius 可以很方便的設置出圓角矩形，但是在IE8及以下版本卻不支持這個屬性，為了在舊版本的瀏覽器中實現寬高自適應的圓角矩形，可以采用以下三種方法。

1.使用背景圖片制作圓角

使用背景圖片制作寬、高自適應的圓角矩形，首先需要切出4個圓角圖片，然后把4個圓角圖片放在矩形的四個角上就大功告成了，這一共需要5個div標簽，1個容器div和4個圓角背景div。是不是很好理解。

具體實現來說，需要注意一些細節。對于矩形容器div：

上下內邊距的大小至少設置為圓角的高度。

position設置為相對定位。

放置內容。

對于4個圓角背景div：

分別設置各個圓角背景圖片。

絕對定位于容器矩形的四個角。

需要設置寬高值才能顯示背景圖片。

假設圓角圖片的寬高是5px，具體代碼如下：

XML/HTML Code復制內容到剪貼板

總結

以上是生活随笔為你收集整理的html圆角边框只有左边,border-radius以外的CSS圆角边框制作方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。