border radius 圓角是做網頁永遠繞不過的話題，以前基本是通過背景圖片做的，有了 CSS3 以後通過屬性就 能夠搞定，我們可以通過 border radius 設置元素的圓角半徑。 對於一個正方形，我們只需要設置為邊長的一半就可以呈現一個圓。 "代碼" border radius 是縮寫的 ...
border-radius
圓角是做網頁永遠繞不過的話題，以前基本是通過背景圖片做的，有了 CSS3 以後通過屬性就 能夠搞定，我們可以通過 border-radius 設置元素的圓角半徑。
border-radius: 5px;對於一個正方形，我們只需要設置為邊長的一半就可以呈現一個圓。
div {
width: 200px;
height: 200px;
border-radius: 50%; // 設置百分比
border-radius: 100px; // 設置長度一半
}border-radius 是縮寫的格式，其實 border-radius 和 border 屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法
border-top-left-radius: length, length;
border-top-right-radius: length, length;
border-bottom-left-radius: length, length;
border-bottom-right-radius: length, length;第一個值是圓角水平半徑，第二個值是垂直半徑,如果第二個值省略，那麼其等於第一個值，這時這個角就是一個四分之一的圓角，如果任意一個值為0，那麼這個角就不是圓角
box-shadow
CSS3 原生支持了陰影效果
box-shadow:inset h-shadow v-shadow blur-radius spread-radius colorbox-shadow 屬性至多有6個參數設置：
陰影類型：此參數是一個可選值，如果不設值，其預設的投影方式是外陰影；如果取其唯一值inset,就是將外陰影變成內陰影
h-shadow: 是指陰影水平偏移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊
v-shadow: 是指陰影的垂直偏移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部
陰影模糊距離：此參數是可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊
陰影陰影的尺寸：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小
陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取預設色，但各瀏覽器預設色不一樣
box-shadow 可以使用一個或多個投影，如果使用多個投影時必須需要用逗號,分開
box-shadow: 3px 3px 3px orange, 3px 3px 3px red;box-sizing
這個屬性多少和邊框也相關，傳統的盒模型width就是指內容區域寬度，和padding、border沒有關係，但是這在佈局上帶來一定的困難
box-sizing 可以改變盒模型
- content-box：標準盒模型
- border-box：
width = padding-left + padding-right + border-left-width + border-right-width + content width
height = padding-top + padding-bottom + border-top-width + border-bottom-width + content height
div {
width: 100px; // width 包含了左右padding的寬度 + 左右border的寬度
height: 100px; // height 包含了上下padding的寬度 + 上下border的寬度
padding: 20px;
border: 1px solid #000;
box-sizing: border-box;
}text-overflow
- clip：隱藏超出文本
- ellipsis：顯示省略符號來代表被修剪的文本。
對於省略號效果還需要其它屬性配合
p {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}擔心會有人提問上面的代碼只能在第一行顯示省略號，假如我想在第二行或者第三行顯示怎麼辦呢？
原理就是通過偽元素 ::after 來實現是不是非常的 easy。
過渡和動畫
CSS3 的動畫是瀏覽器原生支持的，好處就是流暢
transition（過渡）
在CSS3引入 transition 之前css沒有時間軸，所有的狀態變化都是瞬間完成。
transition 的作用在於，指定狀態變化所需要的時間
div {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #000;
transition: all 1s;
}
div:hover {
width: 200px;
height: 200px;
}指定屬性
我們還可以指定transition適用的屬性
div {
transition: 1.5s width;
}這樣一來，只有height的變化需要1秒實現，其他變化（主要是width）依然瞬間實現。
在同一行transition語句中，可以分別指定多個屬性
div {
transition: 1.5s width, 1s height;
}delay
delay：中文翻譯延遲，顧名思義就是延遲多長時間在執行狀態變化。
需要註意的是 delay的參數是在時間的後面
div {
transition: 狀態完成時間 height, 狀態完成時間 延遲時間(delay) width;
}div {
transition: 2s height, 0.5s 2s width;
}delay的真正意義在於，它指定了動畫發生的順序，使得多個不同的transition可以連在一起，形成複雜效果
transition-timing-function
transition的狀態變化速度（又稱timing function），預設不是勻速的，而是逐漸放慢，這叫做ease
div {
transition: 1s ease;
}除了ease以外，其他模式還包括
- linear：勻速
- ease-in：加速
- ease-out：減速
- ease-in-out：規定以慢速開始和結束的過渡效果
- cubic-bezier函數：自定義速度模式 鏈接
註意事項
- 目前，各大瀏覽器（包括IE 10）都已經支持無首碼的transition，所以transition已經可以很安全地不加瀏覽器首碼 transition相容性
- transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態，什麼none到block之類的是不行的
- transition是一次性的，不能重覆發生，除非一再觸發。
