adius，就是半徑的意思。用這個屬性可以很容易做出圓角效果，當然，也可以做出圓形效果。原理很簡單，“正方形的內切圓的半徑等於正方形邊長的一半”。下面就做一個紅色的圓。
方法/步驟
-
語法：
border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?
相關屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
-
取值：
<length>：
由浮點數字和單位標識符組成的長度值。不可為負值。
border-top-left-radius：
由浮點數字和單位標識符組成的長度值。不可為負值。
-
說明：
第一個值是水平半徑。
如果第二個值省略，則它等於第一個值，這時這個角就是一個四分之一圓角。
如果任意一個值為0，則這個角是矩形，不會是圓的。
值不允許是負值。
-
在Adobe Dreamweave 軟件里寫如以下代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在HTML中如何把塊的邊框做成圓角</title>
<style type="text/css">
.a {
border: 1px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height:200px;
width:500px;
padding:20px;
}
</style>
</head>
<body>
<p class="a">
在HTML中如何把塊的邊框做成圓角
</p>
</body>
</html>
-
樣式注釋
各個邊角的樣式分開顯示：
border-top-left-radius: 10px;左上部邊框圓角10個像素
border-top-right-radius: 10px;右上部邊框圓角10個像素
border-bottom-left-radius: 10px;左下部邊框圓角10個像素
border-bottom-right-radius: 10px;右下部邊框圓角10個像素
全部邊角一個樣式：border-radius: 10px;所有邊框圓角10個像素
