* border-radius特性：
* 可以單獨指定水平和垂直半徑，並且值可以是百分比，用/（斜槓）分隔這兩個值即可（可以實現自適應寬度橢圓）。
* 還可以單獨指定四個角度不同的水平和垂直半徑（可以實現半橢圓）
* 四分之一橢圓，主要是調整水平和垂直的半徑
* 示例**：
.wrap* 需要應用到transform的skewx進行扭曲.wrap02
.wrap03
>主要解決容器成為平形四邊形，而內部的文字和元素且垂直顯示
* 巢狀元素，內部元素用skew反向扭曲即可。
* 巢狀的內部元素必須為block，因為transform不能應用在inline元素上。
* 利用偽元素進行扭曲（:before)
.wrap* 應用元素的巢狀，外層與內層元素相互roate旋轉，實現八角形；.wrap>div
.btn
.btn:before
* 設計內部元素max-width的寬度為100%，讓整個最大只能充滿整個外層的div；
* scale屬性控制其的放大倍數，預設為中心點為放大原點（會用到勾股定理，不要額外指定transform-origin）。
.wrap* 利用linear-gradient可以設定角度，多值和漸變透明來實現。.wrap > img
* 還需要注意background-size和background-repeat屬性的設定，防止背景的重疊導致效果不生效
.wrap* 可以利用border-image實現切角，設定border-image-slice（邊框向內偏移）的值；
* border-image用svg來做
* border設定寬度+透明，再加上border-image-slice向內偏移就造就了邊框切角邊框；
* background-clip：要設定為padding-box，不然背景會延伸到邊框上。
.wrapsvg* 其他方案
* 利用clip-path屬性，但不完全受支援
* css4會直接給出corner-path屬性來支援切角
* 了解transform的基本原理
a和d表示縮放且不能為0；c和b控制傾斜；e和f控制位移
* translate(位移)：matrix(1,0,0,1,x,y)
* scale(縮放)：matrix(x,0,0,y,0,0);
* skew(傾斜)：matrix(1,tany,tanx,1,0,0)，由於輸入的是deg（角度），需要將角度轉換為弧度值
* rotate(旋轉)：matrix(cosn,sinn,-sinn,cosn,0,0)，角度轉換為弧度
* 上述值的應用都與transform-origin的值有關係，他是定位元素旋轉的原點，可以是top，bottom，center等，可以指定x,y,z三種座標系
* perpective:透視，不可以負數，0或百分比，只能是數值；
* 表示觀察者到被觀察物體的一段距離
* 透視距離與物體越遠，物體就會顯得越小
* 透視只能設定在變形元素的父級或祖先級，因為瀏覽器會為其子級的變形產生透視效果
* 在3d變換上沒有傾斜(skew)這個屬性。
* 動畫餅圖，效果如下：
實現步驟如下：
* 畫出乙個yellowgreen的圓，並利用linear-gradient設定background-image的值，實現兩種顏色各顯示一半的功能；
* 然後加入乙個偽元素，繼承父級（真實元素）的背景色，然後用rotate旋轉即可
* 要利用margin-left讓其靠左
* 利用transform-origin設定其旋轉定位點
* 動畫展示**如下：
@keyframes spin}@keyframes bg
}.wrap
.wrap::before
Css3新特性應用之視覺效果例項
一 單側陰影 1 box shadow屬性的應用，格式 h shadow v shadow blur spread color inset屬性取值介紹 h sahdow 水平陰影的位置，允許負值 v shadow 垂直陰影的位置，允許負值 blur 模糊距離 spread 陰影的尺寸，擴張距離，可以...
CSS3有哪些新特性？CSS3新特性詳解
本篇文章給大家帶來的內容是關於css3有哪些新特性？css3新特性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...
CSS3新特性總結
1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整...