border-radius
為元素新增圓角邊框
還記得在css中margin屬性，如下：
margin：10px；
展開來：margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
相似的還有padding\border等
border-radius也是其中一類
50%-->border-top-left-radius:50%; /*上左角*/四類情況border-top-right-radius:50%; /*上右角*/
border-bottom-right:50%; /*下右角*/
border-bottom-left:50%; /*下左角*/
/*要注意定義的順序：上左、上右、下右、下左，我們習慣於說左上右上右下坐下，但是border-radius屬性表示的時候先說明上下，在說明左右*/
還沒有明白的話，下圖：
左50px;豎直方向50px為圓心50px為半徑畫圓，與左上角的重疊部分
以上例項就能說明50%設定的底層原理，以所在位置為起點，以水平50%/50px，垂直50%/50px的點為圓心，50%/50px為半徑畫圓。與原本div的起點的重疊部分。
那麼這個圓是怎麼畫出來的呢？
當然不是直接在50%的位置以50%的長度畫圓啦
是四個圓心畫出來的四個圓與原來的div對應方向重疊成的圓
圓的半徑還有負值 ？？？
結論就是沒有負值
2.boeder-radius的最大值是多少??? (width:100px;height:100px;backgeound-color:red;)
情況1> border-top-left-radius:100px ; /*100%*/
情況2> border-top-left-radius:150px;
width=height時 值最大為寬高值
那如果是長方形呢？？？？
假如（width:200px;height:100px;background-color:red;）
情況1> 根據上述結論我們直接設定
嗯 ~~~ 貌似是選取了width與height的較小乙個值呢
情況2> 大膽一點兩個值都設定
這個情況??補充乙個小知識點：border-top-left-radius:x y;
nanana也就是x軸平移200px,y軸平移100px（由左往右）
情況3>更大膽一點
當分開寫的時候，最大值超過寬高的最大值，會按照比例，寬高的最大等比進行縮放
（當過大gpu渲染會發生偏差，可能不一樣）
3.如果有border設定又是什麼情況呢？？？
.demoidea**於「渡一教育」
CSS3 CSS3外輪廓屬性
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬於一種動態樣式，只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了，主要是用來在元素周圍繪製一條輪廓線，可以起到...
css3 css的3種引入方式
你好！這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章，了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用，在測試的時候可...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...