1.文字陰影text-shadow
text-shadow:偏移量x 偏移量y 模糊度 顏色；
注意：水平偏移量： 正值向右，負值向左
垂直偏移量： 正值向下，負值向上
模糊度不能為負數
可設定多個text-shadow，每個用逗號分隔
例子:text-shadow:1px 2px 3px red,2px 3px 4px pink;
2.邊框圓角 border-radius
border-radius:10px 10px 10px 10px/5px 5px 5px 5px;
前面四個是橫軸半徑，後面四個值是縱軸半徑，如果後面四個值不寫，縱軸半徑預設等於橫軸半徑
3.盒子陰影 box-shadow
水平偏移量 +向右 -向左
垂直偏移量 +向下 -向上
模糊度不能為負數
inset可設定內陰影，box-shadow：inset 1px 1px 1px red;
設定box-shadow不會改變盒子大小，不會影響兄弟元素布局
可設定多重邊框陰影，增強立體感
4.邊框boeder-image
路徑：border-image-source:url();
border-image-slice:30 fill;
以上，會將中間裁掉的部分在盒子內平鋪
border-image-repeat:stretch //預設的拉伸效果
repeat //平鋪，不完整顯示
round //完整的平鋪
border-image-width:並不能改變盒子大小，只能改變邊框大小
最終的連寫：
border-image:url() slice/width repeat;
5.背景大小 background-size
設定方式：background-size:200px 200px; //具體尺寸
100% 100%; //比例
100% auto; //自適應
auto 100%; //自適應
cover; //鋪滿父容器
contain //在父容器中完整顯示
6.設定背景原點background-origin
也就是重新定義了background-position的顯示位置
應用background-origin:content-box； //以內容左上角為原點
padding-box; //預設選項，以內邊距為原點
border-box; //以外邊距為原點
7.background-clip背景區域裁切（也就是讓在什麼區域內顯示）
作用：裁切背景，移動端應用的多
應用：background-clip:padding-box; //padding以外的部分會被裁掉
border-box; //border以外的部分會被裁掉
content-box; //content以外的部分會被裁掉
8.多背景background: url() ,url(),url();
注意：不同的背景，用逗號分隔
設定多背景的時候，不能再設定背景顏色（不能連寫），如有需要，聚單獨寫background來設定顏色
9.漸變
線性漸變：background-image:linear-gradient(漸變方向開始和結束狀態，漸變範圍（距離）)
漸變方向：可以是具體方向：to top
to bottom
to left
to right
也可以是角度：90deg
例子：background-image:linear-gradient(
to right, //從左向右
red 20%, //開始顏色是紅色，從盒子寬度20%的位置開始變
green //結尾顏色是綠色
注意：如果沒有設定background-size，百分比是以盒子寬度為參照設定的，否則是以background-size為參照設定的；
10.徑向漸變background-image:radial-gradient(圓點，開始、結束)
注意：徑向漸變的百分比是以設定的半徑為參照的
具體值：第乙個值代表水平方向，第二個垂直，第二個如果不設定，預設center
例子：background-image:radial-gradient(
100px 50px at center, //第乙個是水平半徑，第二個是垂直半徑，第三個是圓心，意思是在盒子中心
red 20%, //在圓的半徑20%的位置開始變
green
11.過渡trasition
11.1補間動畫
過渡屬性：transition-property:all //預設全部
width
htight
.....多個屬性用逗號分隔
動畫執行速度（型別）transition-timing-function:linear //勻速
ease
ease-in
ease-out
ease-in -out
注意：transition一般放在開始狀態裡。
11.2幀動畫
12.2d轉換
transiform:translate(x,y) //第乙個值是水平，第二個垂直
旋**transform:rotate(deg); //正值是順時針，負值是逆時針
縮放：trasorm:scale(倍數）； //整數（>1）放大，小數（<1）縮小
傾斜:transform:skew(deg,deg); //水平，垂直
旋轉原點：transform-origin：center; //預設
left;
right;
bottom;
top;
13.3d轉換
左手法則：左手握住旋轉軸，拇指指向旋轉軸方向，四指指向的方向就是正方形。
13.1 3d轉換分類
transform: translatex() translatey() translatrz(); //位移
例子：transform:translatex(100px) translatey(100px) translatez(100px);
transform:rotatex() rotatey() rotatez(); //旋轉
transform:scalex() scaley() scalez(); //縮放
14.透視 perspective
作用：輔助了解3d效果，不是必須的步驟
取值：600-1200px是人眼最舒服的狀態
設定方式：將該屬性作為父元素的單獨屬性設定
將perspective作為transform的屬性設定
transform:perspective(100px) translatex(100px);
15.動畫
語法：@keyframes scale
to{}
通過animation:;呼叫動畫，哪個元素呼叫，就寫在**。
呼叫動畫名稱：animation-name:;
設定動畫執行次數：animation-interation-count:infinite; //一直執行
具體時間，如2s
預設執行1次
動畫執行型別（速度）：animation-timing-function:linear;
ease;
ease-in;
ease-out;
ease-in-out;
動畫逆波（是否有反向運動）：animation-direction:normal;
reverse; //反向
alternate; //正常執行
alternate-reverse;
設定動畫時間之外的狀態：animation-play-state:running； //預設
paused; //暫停
轉為3d盒子：transform-style:preserve-3d;
steps(); //步長
CSS3有哪些新特性？CSS3新特性詳解
本篇文章給大家帶來的內容是關於css3有哪些新特性？css3新特性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...
css3新的特性
圓角邊框border radius 水平值 垂直值 border top left radius 1px 2px 設定左上角圓角 border bottom right radius 設定左下角圓角 border top left radius 設定右上角圓角 border bottom right...
CSS3的新特性
css3實現圓角 border radius 陰影 box shadow 對文字加特效 text shadow 線性漸變 gradient 旋轉 transform transform rotate 9deg scale 0.85,0.90 translate 0px,30px skew 9deg,...