除了上述的簡寫外，還可以和border一樣，分別寫四個角，如下：
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
分別是水平方向和豎直方向半徑，第二值省略的情況下，水平方向和豎直方向的半徑相等。
border-radius 只有在以下版本的瀏覽器：firefox4.0+、safari5.0+、google chrome 10.0+、opera 10.5+、ie9+ 支援 border-radius 標準語法格式，對於老版的瀏覽器，border-radius 需要根據不同的瀏覽器核心新增不同的字首，比說 mozilla 核心需要加上「-moz」，而 webkit 核心需要加上「-webkit」等，但是ie和opera沒有私有格式，因此為了最大程度的相容瀏覽器，我們需要設定如下：
-webkit-border-radius: 10px 20px 30px;
-moz-border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px;
請將標準形式寫在瀏覽器私有形式之後。
舉幾個例子看一下效果：
lang="en">
charset="utf-8">
name="keywords"
name="description"
content="**描述內容">
name="author"
content="劉艷">
四個角的半徑都是30px;
再看乙個標準的圓以及橢圓：
lang="en">
charset="utf-8">
name="keywords"
name="description"
content="**描述內容">
name="author"
content="劉艷">
title>
div .circle
.elipse
style>
head>
class="circle">
div>
class="elipse">
div>
body>
html>效果：
第乙個和第二個div的差別主要在於其是正方形還是長方形，圓圈在輪播時，可以替代圓圈的使用。
以上都是水平方向和豎直方向半徑相等的例子，下面舉兩個水平方向和豎直方向半徑不相同的例子：
lang="en">
charset="utf-8">
name="keywords"
name="description"
content="**描述內容">
name="author"
content="劉艷">
title>
div .div1
.div2
.div3
style>
head>
class="div1">
div>
class="div2">
div>
class="div3">
div>
body>
html>效果如下所示：
CSS3邊框 圓角效果 border radius
border radius是向元素新增圓角邊框。使用方法 border radius 10px 所有角都使用半徑為10px的圓角 border radius 5px 4px 3px 2px 四個半徑值分別是左上角 右上角 右下角和左下角，順時針 不要以為border radius的值只能用px單位，...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS3 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...