css3是css2的公升級,相較於css2多了動畫,2d/3d的轉化,這是兩者最大的區別
一、css3邊框(border)
1、border-radius 圓角
也可對四個角設定不同的值,例如;div
border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px;
也可以單獨對某乙個角設角度,例如:
border-bottom-left-radius: 20px;
2、box-shadow 陰影
其中box-shadow後的第乙個和第二值分別為陰影的相對左右和上下的位置,為0 0時可以不帶單位px,此時陰影在正後方,其餘數值必須帶單位,第三個數值的意義是陰影的擴散範圍。inset是將陰影設定成向內擴散。div
3、border-image 邊框
其中:round 指影象平鋪(重複)來填充該區域;stretch 指影象被拉伸以填充該區域div
二、css3背景
1、background-size
指定背景影象的大小
自定義大小:
伸展背景影象完全填充內容區域:div
2、background-origindiv
注:css3中可以新增多個背景影象div
屬性:background-clip 規定背景的繪製區域。
background-origin 規定背景的定位區域。
background-size 規定背景的尺寸
三、css3漸變
1、線性漸變(linear gradients)- 向下/向上/向左/向右/對角方向
格式 :background: linear-gradient(direction, color-stop1, color-stop2, …);
分別方向(預設從上到下),顏色1,顏色2。。。
也可以定義乙個角度,而不用預定義方向(如to bottom、to top、to right、to left、to bottom right,等等)。
也可以使用角度來控制漸變方向
逆時針方向計算,0deg 是從下到上的漸變,90deg是從左到右的漸變。
格式:background: linear-gradient(angle, color-stop1, color-stop2);
同時當指定顏色的百分比時,顏色是不均勻分布,即按照百分比分布。未指定時均勻分布
使用透明度(transparency):
rgba() 函式中的最後乙個引數可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。
#grad1
repeating-linear-gradient() 函式用於重複線性漸變
格式:background: repeating-linear-gradient(red, yellow 10%, green 20%);
2、徑向漸變(radial gradients)- 由它們的中心定義
格式:background: radial-gradient(center, shape size, start-color, …, last-color);
預設情況下,漸變的中心是 center(表示在中心點),漸變的形狀是 ellipse(表示橢圓形),漸變的大小是 farthest-corner(表示到最遠的角落)。
shape 引數定義了形狀。它可以是值 circle 或 ellipse。其中,circle 表示圓形,ellipse 表示橢圓形。預設值是 ellipse。
closest-side:半徑為從圓心到最近邊
closest-corner:半徑為從圓心到最近角
farthest-side:半徑為從圓心到最遠邊
farthest-corner:半徑為從圓心到最遠角
四、css3的文字效果
1 text-shadow 文字陰影
格式樣例:
h1其中第乙個值和第二個值分別是陰影的相對左右和上下的位置,第三個值是陰影擴散範圍
2、word-wrap 換行
格式: word-wrap:break-word;
自動換行屬性允許您強制文字換行 - 即使這意味著**它中間的乙個字,即將單詞強行斷開
break-all 截斷換行
keep-all 全單詞換行
單行溢位省略語句 :
多行溢位省略white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
五、css的2d轉換transformdisplay: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;
1、translate() 平移
translate() 預設x
translatex(100px)
translatey(100px)
translatez(100px)
translate3d(100px,20px,0)
2、rotate() 旋轉
正數時順時針旋轉,負數時逆時針
rotate z 預設
rotatex
rotatey
rotatez
3、scale() 縮放
scale
scale(1)
scale(1,2)
4、skew() 拉伸
skew
skew(45deg,10deg)
skewx(45deg)
skewy(45deg)
5、matrix() 合併屬性,有六個引數,包含旋轉,縮放,移動(平移)和傾斜功能。
六、css3的3d轉換
transform-style:preserve-3d;(將2d轉化為三維)
transform: rotate3d(0,1,0,180deg);前三個值 為0不轉,為1時旋轉
rotatex()方法,圍繞其在乙個給定度數x軸旋轉
rotatey()方法,圍繞其在乙個給定度數y軸旋轉。
七、css3的過渡
要實現這一點,必須規定兩項內容:新增效果的css屬性和效果的持續時間。
八、css3動畫/*設定過渡延遲*/
transition-delay: 1s;
/*設定過渡的時間*/
transition-duration: 2s;
/*設定過渡屬性 如果過渡的屬性比較多 其他的一樣 可以寫成all 也可以使用逗號連寫*/
transition-property: text-shadow;
/*設定動畫的方式 linear ease ease-in ease-out ease-in-out*/
transition-timing-function:linear;
/* transition:text-shadow .5s linear,font-size .5s ease-in;*/
transition:all .5s linear;
必須定義動畫名稱和動畫的持續時間。如果省略的持續時間,動畫將無法執行,因為預設值是0。
兩種形式:
1、from to
例:
2、 0% 100%div
@keyframes myfirst
to }@-webkit-keyframes myfirst /* safari and chrome */
to }
例
屬性 :div
@keyframes myfirst
25%
50%
100%
}@-moz-keyframes myfirst /* firefox */
25%
50%
100%
}@-webkit-keyframes myfirst /* safari and chrome */
25%
50%
100%
}@-o-keyframes myfirst /* opera */
25%
50%
100%
}
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
CSS基礎 CSS3動畫
通過css3動畫屬性,我們可以建立動畫,實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性,除了 animati...
CSS3基礎總結
1 css背景 background attachment 背景影象是否固定或者隨頁面其餘部分滾動 background color 背景顏色 background repeat 背景如何重複 background clip 規定背景的繪製區域 2 css文字 color 文字顏色 directio...
CSS3基礎簡介
css3完全向下相容。增加了許多新的模組。選擇器 盒模型 背景和邊框 文字特效 2d 3d轉換 動畫 多列布局 響應式布局 w3c中css3規範仍在開發。但現代瀏覽器已經開始支援。部分新屬性需要新增瀏覽器字首。box shadow 實現邊框陰影 屬性值包括 模糊度 x軸偏移 y軸偏移 陰影顏色 bo...