一、圓角、陰影
1.圓角
border-radius:value; 四個角
border-radius:value value; 左上角，右下角 右上角，左下角
border-radius:value value value;
border-radius:value value value value; 順時針轉，左上角開始
border-radius: 50%; 畫圓
語法：box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平方向的位置（正負）；必需
垂直方向的位置（正負）；必需
模糊度（正值）
擴充套件值 （正負）
顏色位置 預設outset（**影） inset（內陰影）
字陰影語法：text-shadow: h-shadow v-shadow blur color;
text-shadow：水平方向的位置；必需
垂直方向的位置；必需
模糊度顏色
二、轉換
使元素在形狀上或者位置發生一定的改變
屬性：transform:;
1、位移
transform:translate(x,y)
當只取乙個值，代表水平方向，兩個值，代表水平方向和垂直方向
（右下為正，可取負值）
transform: translatex(); 水平方向位移
transform: translatey(); 垂直方向位移
transform:rotate(deg);
取正值，順時針旋轉，負值，逆時針旋轉
旋轉會旋轉整個座標軸
預設旋轉中心點為寬高的一半 旋轉寫在位移後邊
transform:rotatex(deg);
transform:rotatey(deg);
3、縮放
transform:scale(x,y);
預設值 1
取值0-1 縮小
>1 放大
當取值為乙個時，等比例縮放；兩個值代表水平和垂直
transform:scalex(); 水平方向上縮放
transform:scaley(); 垂直方向上縮放
transform；skew(xdeg,ydeg)
取乙個值代表水平方向；兩個值代表水平和垂直（正負）
transform: skewx(deg);
transform: skewy(deg);
1、過渡
屬性：transition:;
作用：從乙個效果平滑的過渡到另外乙個效果
必須有觸發事件 :hover
1.1、過渡的屬性
transition-property: none|all|property
可以過渡的屬性：
顏色取值為數值
陰影轉換
背景漸變
簡寫 all
transition-duration: s|ms;
s ms
1s=1000ms
速度變換型別
transition-timing-function: ;
ease 預設值 先加速後減速效果
ease-in 加速效果
ease-out 減速效果
ease-in-out 先加速後減速效果
linear 勻速
transition-delay: s|ms;1.5、簡寫屬性transition
transition屬性是乙個簡寫屬性，用於設定四個過渡屬性
語法：
transition:property duration timing-function delay;css3 定義了兩種型別的漸變（gradients）
線性漸變（linear gradients）
徑向漸變（radial gradients）
linear gradients- 向下/向上/向左/向右|||對角方向
background: linear-gradient(direction |||angle, color-stop1, color-stop2, ...);
方向 to left/…|||角度，顏色值
repeating-linear-gradient() 函式用於重複線性漸變：
background: repeating-linear-gradient(red, yellow 10%, green 20%);radial gradients- 由它們的中心定義
background: radial-gradient(center, shape size, start-color, ..., last-color);它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形
size 引數定義了漸變的大小。它可以是以下四個值：
closest-side farthest-side closest-corner farthest-corner動畫animation
關鍵幀動畫，通過關鍵幀控制動畫的每一步
1、@keyframes
作用：用於宣告動畫，指定關鍵幀
幀，用於分解動畫動作
每個幀代表某個時間點
定義每個幀上的動作
@keyframes語法：
@keyframes name
percent（百分比值）
to|100%
}
animation屬性用於控制動畫
呼叫由@keyframes定義的動畫
設定動畫屬性，如時間、次數等
animation屬性是乙個簡寫屬性
語法：animation:name |duration |timing-function |delay |iteration-count |direction;
animation-name: ; 呼叫動畫，規定需要和@keyframes的名字一致
animation-duration: s|ms; 動畫完成乙個週期所需要的時間
animation-timing-function: ; 規定動畫的速度變化型別
animation-fill-mode: forwards; 動畫停在最後一幀預設值為none
animation-play-state:paused|running; 屬性規定動畫正在執行還是暫停，預設值為running
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
CSS3新增屬性（3）
1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始，100 是動畫的完成，這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...
css3新動 css3新增動畫
1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...