css3的基礎應用

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 陰影

div

其中box-shadow後的第乙個和第二值分別為陰影的相對左右和上下的位置，為0 0時可以不帶單位px，此時陰影在正後方，其餘數值必須帶單位，第三個數值的意義是陰影的擴散範圍。inset是將陰影設定成向內擴散。

3、border-image 邊框

div

其中：round 指影象平鋪（重複）來填充該區域；stretch 指影象被拉伸以填充該區域

二、css3背景

1、background-size

指定背景影象的大小

自定義大小：

div

伸展背景影象完全填充內容區域：

div

2、background-origin

div

注：css3中可以新增多個背景影象

屬性：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;

多行溢位省略

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;

五、css的2d轉換transform

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屬性和效果的持續時間。

/*設定過渡延遲*/ 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;

八、css3動畫

必須定義動畫名稱和動畫的持續時間。如果省略的持續時間，動畫將無法執行，因為預設值是0。

兩種形式：

1、from to

例：

div @keyframes myfirst to }@-webkit-keyframes myfirst /* safari and chrome */

to }

2、 0% 100%

例

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 動畫的名稱。

css3的基礎應用

CSS基礎 CSS3動畫

CSS3基礎總結

CSS3基礎簡介

css3的基礎應用

CSS基礎 CSS3動畫

CSS3基礎總結

CSS3基礎簡介

相關推薦